最近接到一个需求，要求展示机构信息，机构分为若干层，有从属关系，且要展示字段较多，所以第一时间想到了ElementUI中Table组件的树形展示，效果如下图。
机构信息树形列表
相关代码
<template>
<div>
<el-table
:data="tableData"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
lazy // 使用lazy属性，开启了懒加载
:load="load"
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
prop="name"
label="机构名称"
sortable
width="180">
</el-table-column>
<el-table-column
prop="certification"
label="当前认证情况"
sortable
width="180">
</el-table-column>
<el-table-column
prop="user"
label="最后操作人">
</el-table-column>
<el-table-column
prop="operate"
label="操作">
<template slot-scope="scope">
<el-button type="text">申请认证</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: []
}
},
mounted() {
this.init();
},
methods: {
init() {
this.tableData = [{
id: 1,
certification: '未认证',
name: '一级机构',
user: '',
children: [
{
id: 21,
certification: '未认证',
name: '二级机构1',
user: '',
hasChildren: true
},
{
id: 22,
certification: '未认证',
name: '二级机构2',
user: '',
hasChildren: false,
},
]
}];
},
load(tree, treeNode, resolve) {
setTimeout(() => {
resolve([
{
id: 31,
certification: '未认证',
name: '三级机构1',
user: '',
}, {
id: 32,
certification: '未认证',
name: '三级机构2',
user: '',
}
])
}, 1000)
}
},
}
</script>
执行说明
-
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
这个属性的意思是，tableData数组的每一项表示树的一个节点，如果该节点有子节点，则子节点数据存在children数组中，hasChildren字段存布尔值，表示该节点有没有子节点。 - lazy属性，开启了懒加载，当点开某个子节点时，才会触发load方法去调接口查子节点数据。
进入页面时调用init方法，会拿到一级根节点和二级子节点的数据，当点开某个二级子节点时，会调用load方法，去拿对应的三级子节点。当某个二级子节点已经展开过，将它收起重新展开，不会重新触发load方法，确确实实的懒加载。
而且三级子节点的数据（对应二级子节点的children数组）在el-table内部维护，开发者能拿到的tableData值实际并未发生更改。
遇到的问题
如图可以看到，每一个节点都对应了一个申请认证的操作按钮，当申请认证后，需要更新下该节点数据的状态。
这时发现，如果是一级二级的节点状态发生变化，可以通过重新调用init方法更新，但是三级节点的数据，并不在tableData中维护，无法更新。
解决方案
- 给el-table加上v-if='showTable'，默认为true，当更新了某个节点状态后，重新调用init方法，列表接口调完后，现将showTable设置为false，然后再showTable设置为true。这样，列表整体都会重新加载，且所有的二级节点都收起来了，点开二级节点，则会重新触发load方法，去查询最新数据，这样状态就是正确的了。
changeStatus() {
change().then(res => {
this.init();
});
},
init() {
this.showTable = false;
this.$nextTick(() => {
this.showTable = true;
this.tableData = [{
id: 1,
certification: '未认证',
name: '一级机构',
user: '',
children: [
{
id: 21,
certification: '未认证',
name: '二级机构1',
user: '',
hasChildren: true
},
{
id: 22,
certification: '未认证',
name: '二级机构2',
user: '',
hasChildren: false,
},
]
}];
});
},
这种方法的问题是，之前展开的节点会收起到初始状态，看测试/客户能否接受了。
- 将每个节点load回调中的treeNode、resolve方法存起来，当需要更新的时候，主动调用load方法即可。
let treeMap = new Map();
// methods中
changeStatus(id) {
change({
id
}).then(res => {
let treeObj = treeMap.get(id);
this.load({id: id}, treeObj.treeNode, treeObj.resolve);
});
},
load(tree, treeNode, resolve) {
if (!treeMap.has(tree.id)) {
treeMap.set(tree.id, {
treeNode,
resolve
})
}
setTimeout(() => {
resolve([
{
id: 31,
certification: '未认证',
name: '三级机构1',
user: '',
}, {
id: 32,
certification: '未认证',
name: '三级机构2',
user: '',
}
])
}, 1000);
},
定义了一个treeMap来存每个三级节点对应的treeNode和resolve，这两个是load回调中的必传参数。当更新某一个节点数据时，找到对应节点的这俩参数，然后主动调用下load方法即可。
上面的是伪代码，还有一些其他处理逻辑，比如：
- 三级节点没有下级，不会有load，更新状态后，应该load的是该三级节点对应的二级节点。
- 一二级节点更新后直接this.init即可
- 如果需要更新整个树，要记得清空treeMap，避免引入其他问题。
- ......
这种方案的好处是，最小化范围更新，哪里变了更新哪里。而且之前展开收起的节点，保持原状，不会被强制收起来，更符合正常的操作认知。
希望本文能够帮助到需要的朋友！！
