##前言
####项目开发过程中发现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:比如里面粗糙的线线框框~~~），可以自行调整哦 #@-@# 简单粗暴的博主有没有很奈斯~~
