<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 弄',
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);
}
}
},
}