vxe-table 动态列 和tree-node功能
官网参考资料
https://xuliangzhan_admin.gitee.io/vxe-table/#/table/grid/tree
实现过程-代码
组件
<vxe-table
:data="tableData"
:columns="tableColumn" // 动态列
:tree-config="{children: 'children'}">
<!-- 插槽用法 -->
<template v-slot:index_id="{ row, column }">
<span>{{row.Id}}--插槽:可随便写一些你想写的内容</span>
</template>
</vxe-table>
动态列
data(){
retrun {
tableColumn: [
{ field: "Id",
title: "Id",
width: 80,
treeNode: true, // 树节点声明--重点
slots: { default: "index_id"} // 插槽声明
},
{
field: "sex",
title: "sex",
width: 120,
editRender: { name: "input" }
},
{
field: "date",
title: "date",
width: 120,
editRender: { name: "input" }
}
],
tableData: [{
Id: '1',
sex: '男',
date: '2019-08',
children: [
{
Id: '1-2',
sex: '女',
date: '2019-08',
children: [
{
Id: '1-3',
sex: '男',
date: '2019-08',
},
{
Id: '1-4',
sex: '男',
date: '2019-08',
}
]
},
{
Id: '2',
sex: '女',
date: '2019-08'
}
}
}
如有不懂,可留评论哈!