element ui 表格展开问题

    技术2023-05-29  29

    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:'' } }

     

    Processed: 0.019, SQL: 8