el-table树形数据序号展示
最终效果图:
- el-table中通过设置
row-key="id" :tree-props="{children: 'subList'}" :default-expand-all="true"
实现树状展示数据。
<el-table
:data="list"
row-key="id"
:tree-props="{children: 'subList'}"
:default-expand-all="true"
>
<el-table-column
prop="parentIndex"
label="序号"
width="300"
align="left">
</el-table-column>
<el-table-column
prop="name"
label="评价指标"
width="300"
align="left"
show-overflow-tooltip
/>
</table>
data(){
return {
// 表格数据
list:[
{
name:undefined,
parentIndex: undefined,
subList: [
name:undefined,
parentIndex: undefined,
subList: null
]
},
{
name:undefined,
parentIndex: undefined,
subList: [
name:undefined,
parentIndex: undefined,
subList: null
]
},
]
}
}
- 序号列绑定自定义的字段
prop="parentIndex"
,控制数据序号的展示;
实现方式: 通过接口获取数据时调用setParentIndex方法,并将接口返回的列表数据传入,重新处理数据,为每项数据增加parentIndex字段。
setParentIndex(list){
list.forEach((item, index) => {
item.parentIndex = index + 1 + ''
if(item.subsetList && item.subsetList.length > 0){
this._setParentIndex(item, item.parentIndex)
}
});
},
_setParentIndex(item, oldIndex){
if (item.subsetList && item.subsetList.length > 0) {
item.subsetList.forEach((subItem, i) => {
subItem.parentIndex = oldIndex + '.' + (i + 1);
this._setParentIndex(subItem, subItem.parentIndex);
});
}else {
return
}
},