element ui提供了针对表格行展开的方法:
通过设置 type="expand" 和 Scoped slot 可以开启展开行功能,el-table-column 的模板会被渲染成为展开行的内容,展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同<el-table-column type="expand">实例:
<!-- 示例展示的为展开内容为表格--> <template> <el-table :data="tableData" :row-key="rowkey" ----外层table的id(需唯一) :expand-row-keys="expands" ---展开的row的id style="width: 100%"> <el-table-column type="expand"> ---type="expand" 类型为展开 <template slot-scope="props"> <el-table :data="tableData" style="width: 100%"> <el-table-column> </el-table-colum> </el-table> </template> </el-table-column> <el-table-column label="商品 ID" prop="id"> </el-table-column> </el-table> </template>注意事项:
①:row-key:必须是唯一属性,不能含有重复的项
②:外层tableData数据中,若tableData含有子集即:实例:
{ name:'', ege:'', children:{ ---此处的key不能命名为children,须换成其他 name:'', ege:'' } }