一。安装依赖,npm i vue-table-with-tree-grid -s
二.引入依赖,注册组件
import TreeTable from 'vue-table-with-tree-grid';
components: {
TreeTable
},
三.使用组件
<tree-table
:data="data2"
:columns="columns"
:stripe="stripe"
:border="border"
:show-header="showHeader"
:show-summary="showSummary"
:show-row-hover="showRowHover"
:show-index="showIndex"
:tree-type="treeType"
:is-fold="isFold"
:expand-type="expandType"
:selection-type="selectionType">
</tree-table>
<script>
import TreeTable from 'vue-table-with-tree-grid';
export default {
name: 'salePlanUploadAdd',
components: {
TreeTable
},
data () {
return {
stripe: false,//是否显示间隔斑马纹
border: false,//是否显示纵向边框
showHeader: true,//是否显示表头
showSummary: false,//是否显示表尾合计行
showRowHover: true,//鼠标悬停时,是否高亮当前行
showIndex: false,//是否显示数据索引
treeType: true,//是否为树形表格
isFold: true,//树形表格中父级是否默认折叠
expandType: false,//是否为展开行类型表格(为 True 时,需要添加作用域插槽, 它可以获取到 row, rowIndex)
selectionType: false,//是否显示间隔斑马纹,
data2: [
{
name: '根组织',
description: '111',
owner:'admin',
active: true,
children: [
{
name: '大中华区',
description: 'ceshi1',
owner: '33',
active: true,
children: [
{
name: '浙江省',
description: 'hahah',
owner: '22',
active: true,
children: [
{
name: '杭州市',
description: '9999',
owner: '111',
active: true
}
]
}
]
}
],
},
{
name: 'Tom',
sex: 'male',
likes: ['football', 'basketball'],
score: 20,
},
],
//表格标题数据
columns: [
{
label: "用户组名",
prop: "name"
},
{
label: "描述",
prop: "description",
minWidth: "50px"
},
{
label: "所有者",
prop: "owner"
}
]
};
},
mounted(){
}
}
</script>