之前在使用树形结构的表格时,就对这两个属性名感到疑惑了,也不知道哪个能改,就按照官方文档一整个搬上去了,如下
<el-table
:data="tableData1"
style="width: 100%"
row-key="id"
border
lazy
:load="load"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
tableData1: [{
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,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 32,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}
])
}, 1000)
}
},
}
children:用于指定当前节点(行)的子节点数据存储的字段名。接口中孩子数据的Json对象名
hasChildren:用于指定当前节点(行)是否有子节点的标识字段名。
可以换字段名的时引号内的字段,例如,如果想将children
改为subRows
,你可以将代码改为:tree-props="{ children: 'subRows', hasChildren: 'isParent' }"
。