##前言
####项目开发过程中发现element中并没有现成的树状展开表格组件,于是决定在此基础上进行二次开发 #@@#。
直接贴源码~~
<div>
<el-table
:data="successTreeData"
:show-header="false"
row-key="id"
style="width: 100%"
>
<el-table-column type="expand">
<template slot-scope="props">
<el-table
:data="props.row.children"
:show-header="false"
highlight-current-row
@row-click="sucHandleNodeClick"
row-key="id"
style="width: 100%"
>
<el-table-column
label=""
prop="id"
>
</el-table-column>
<el-table-column
label=""
prop="name"
>
</el-table-column>
<el-table-column
label=""
prop="date"
>
</el-table-column>
<el-table-column
label=""
prop="address"
>
</el-table-column>
</el-table>
</template>
</el-table-column>
<el-table-column
label=""
prop="name"
>
</el-table-column>
</el-table>
</div>
export default{
data(){
return{
successTreeData: [
{
id: 1,
name: "王小虎",
children: [
{
id: 33,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
id: 34,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
],
},
{
id: 2,
name: "王小虎",
children: [
{
id: 31,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
id: 32,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
],
},
{
id: 3,
name: "王小虎",
children: [
{
id: 35,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
id: 36,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
],
},
],
}
}
}
效果如下图,样式比较简陋(ps:比如里面粗糙的线线框框~~~),可以自行调整哦 #@-@#
简单粗暴的博主有没有很奈斯~~