el-table树形数据全部展开和收缩（toggleRowExpansion）

本文主要讲根据element-ui文档的toggleRowExpansion实现el-table树形数据全部展开和收缩

1.页面效果

2.HTML页面展示

树形数据：直接使用element-ui的demo数据

<div><el-button type="primary" @click="toggleRowExpansion">全部{{ isExpansion ? "收缩" : "展开" }}el-button><div><el-table:data="tableData"style="width: 100%"row-key="id"default-expand-all:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"ref="dataTreeList"><el-table-column prop="date" label="日期" sortable width="180">el-table-column><el-table-column prop="name" label="姓名" sortable width="180">el-table-column><el-table-column prop="address" label="地址">el-table-column>el-table>div>div>

3.全部展开和收缩

根据element-ui文档的toggleRowExpansion

先在data里定义isExpansion为true，同时el-table的 default-expand-all默认全部展开，当点击按钮，this.isExpansion取反；

遍历得到row和布尔值isExpansion，通过ref找到table执行方法toggleRowExpansion(row, expanded)

methods: {// 切换数据表格树形展开toggleRowExpansion() {this.isExpansion = !this.isExpansion;this.toggleRowExpansionAll(this.tableData, this.isExpansion);},toggleRowExpansionAll(data, isExpansion) {data.forEach((item) => {this.$refs.dataTreeList.toggleRowExpansion(item, isExpansion);if (item.children !== undefined && item.children !== null) {this.toggleRowExpansionAll(item.children, isExpansion);}});},},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！