el-table懒加载，修改数据局部加载懒加载数据

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

看着标题是不是有点绕，这里的需求是使用el-table的懒加载，加载数据后，修改懒加载后的数据时不进行全局的刷新，而是只操作当前懒加载的数据，比如一级是真实的数据，二级是懒加载的数据，当二级的某条数据进行了修改后，只让当前的二级菜单重新向后台请求数据，进行刷新得到最新的数据

---

一、在el-table中开启懒加载

支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与hasChildren 都可以通过 tree-props 配置。

 <el-table
    :data="tableData"
    style="width: 100%"
    row-key="id"
    border
    lazy
    :load="load"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</div>
</template>
<script>
  export default {
    data() {
      return {
      	thisTabeDom: Object,
        tableData: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          hasChildren: true
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
      load(tree, treeNode, resolve) {
        setTimeout(() => {
          resolve([
            {
              id: 31,
              pid: 3,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 32,
              pid: 3,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }
          ])
        }, 1000)
      }
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

二、进行改造

1.在data中添加全局变量

代码如下（示例）：

export default {
    data() {
      return {
        // 存储操作的DOM数据
      	thisTabeDom: Object,
        tableData: [{}]
      }
    }
}
1
2
3
4
5
6
7
8
9

2.在对应的操作中给thisTabeDom赋值

代码如下（示例）：

<el-button 
icon="el-icon-edit" 
type="primary" 
size="mini" 
@click="handleDialogForm(scope)">
编辑
</el-button>

<!-- 编辑/新增弹出框 -->
<dialog-formBox :visible.sync="dialogFormVisible" :menuInrForm="this.menuForm" @addCallback="tabeDomCallback"></dialog-formBox>
1
2
3
4
5
6
7
8
9
10

/**
 * 新增、编辑
 */
handleDialogForm(box) {
  // 将操作的scope保存在全局变量中
  this.thisTabeDom = box
  console.log(box);
  if (box.row && box.row.id) {
    this.menuForm = { ...box.row };
  } else {
    this.menuForm = {};
  }
  // 显示el-dialog对话框进行数据修改操作
  this.dialogFormVisible = true;
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.编写回调方法tabeDomCallback

代码如下（示例）：

// 修改回调
tabeDomCallback(val) {
  console.log(val);
  console.log(this.thisTabeDom.row);
  var states = this.thisTabeDom.store.states
  var treeData = states.treeData
  // 判断获取的ID是父ID还是当前ID
  let id = val ? this.thisTabeDom.row.id : this.thisTabeDom.row.pid
  let data = treeData[id]
  let teb = 'loaded' in data
  // 如果对象中没有loaded字段，则表示修改的数据不是懒加载的
  if (!teb) {
    // 调用列表刷新
    this.getList()
    console.log('回调结束,刷新列表');
    return
  }
  // 将懒加载数据标志改为false
  treeData[id].loaded = false
  // 调用组件内部的方法加载数据 间接调用懒加载方法
  this.thisTabeDom.store.loadOrToggle({id})
  console.log('回调结束,刷新DOM');
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

4.对话框操作后进行方法回调

代码如下（示例）：

/**
 * 确认提交
 */
confirm() {
  this.$refs.menuForm.validate(async (valid) => {
    if (valid) {
      //编辑
      if (this.menuForm && this.menuForm.id) {
        await organApi.update({
          id: this.menuForm.id,
          name: this.menuForm.name,
        });
        // 回调，false 表示通过父ID懒加载子节点
        await this.$emit("addCallback", false);
        this.$message.success("修改成功");
      } else {
        //新增
        await organApi.add({
          name: this.menuForm.label,
          pid: this.menuForm.pid? this.menuForm.pid: 0,
        });
        // 回调，false 表示通过当前ID懒加载子节点
        await this.$emit("addCallback", true);
        this.$message.success("新增成功");
      }
      this.onClose();
    }
  });
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

---

总结

希望之篇文章对大家有所帮助
方法实现 Debug el-table的懒加载