记录一下elmentui中树状表单的全部展开与收缩

发布时间 2023-06-06 14:17:12作者: 妞妞猪

html页面

   <el-button style="margin-left: 10px;margin-bottom: 10px;" type="primary" plain size="mini" @click="toggleRowExpansion" icon="el-icon-sort">
          全部{{ isExpansion ? "收缩" : "展开" }}
      </el-button>
      <el-table
        default-expand-all
        ref="dataTreeList"
        :tree-props="{children: 'children'}">
        ......
  </el-table>
 
js方法
export default {
    data() {
        return {
            tableData: [],
            isExpansion: true
        }
    },
    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);
          }
        });
      },
    },
.......
}
参考链接:https://blog.csdn.net/weixin_46724415/article/details/121908210