<el-table
:data="tableData"
row-key="id"
ref="table"
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-column label="操作">
<template slot-scope="scope">
<!-- 如果有父节点才会有更新节点方法,因为只有父节点有过加载数据才能提供该方法 -->
<el-tooltip v-if="scope.row.parentNode" content="更新节点数据" placement="top">
<el-button
size="mini"
type="primary"
@click="updateItem(scope.row)"
>
更新节点数据
</el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
export default {
data() {
return {
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 弄',
// element用于判断是否可懒加载参数
hasChildren: true
}
]
}
},
methods: {
load(tree, treeNode, resolve) {
setTimeout(() => {
// 模拟接口请求和数据
const list = [
{
id: 31,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}
]
// 将懒加载方法所需数据记录,方便下次更新调用
list.forEach(item => {
item.parentNode = { tree, treeNode, resolve };
})
resolve(list);
}, 1000)
},
updateItem(rowData) {
// 有父节点才能说明劫持了加载方法
const { parentNode } = rowData;
if (parentNode) {
const { tree, treeNode, resolve } = parentNode;
// 必须清空表格组件里当前层级的数据才能赋值
this.$set(this.$refs.table.store.states.lazyTreeNodeMap, tree.id, []);
// 更新当前层级数据
this.loadTableChildren(tree, treeNode, resolve);
}
}
},
}
版权声明:本文为wzp20092009原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。