el-table 树状表格展开及折叠

在工作中,可能需要对树状表格进行全部折叠及全部展开,可采用以下方法: 

页面内容如下:

<el-table v-if="refTable" :data="list" row-key="id" :tree-props="{children:'children',hasChildren:'hasChildren'" :default-expand-all="isExpand">
    <el-table-column label="机构名称" prop="attributes.org_name"></el-table-column>
</el-table>

数据格式如下:

    data() {
      return {
        data: [{
          attributes:[org_name:'1'],
          hasChildren: true,
          label: '一级 1',
          children: [{
            attributes:[org_name:'1'],
            hasChildren: true,
            label: '二级 1-1',
            children: [{
              attributes:[org_name:'1'],
              hasChildren: false,
              label: '三级 1-1-1'
            }]
          }]
        }],
      };
    },

具体方法如下:

handleExpand() {
    this.refTable = false
    this.isExpand = !this.ieExpand
    this.$nextTick(() => {
        this.refTable = true
    })
}

 

 

相关推荐

  1. el-table 树状表格展开折叠

    2024-07-09 23:02:01       19 阅读
  2. 一键展开折叠树形表格

    2024-07-09 23:02:01       34 阅读
  3. el-table 树状表格查询符合条件的数据

    2024-07-09 23:02:01       22 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-09 23:02:01       50 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-09 23:02:01       54 阅读
  3. 在Django里面运行非项目文件

    2024-07-09 23:02:01       43 阅读
  4. Python语言-面向对象

    2024-07-09 23:02:01       54 阅读

热门阅读

  1. pytorch LLM训练过程中的精度调试实践

    2024-07-09 23:02:01       18 阅读
  2. 【TORCH】神经网络权重初始化和loss为inf

    2024-07-09 23:02:01       18 阅读
  3. k8s-第九节-命名空间

    2024-07-09 23:02:01       21 阅读
  4. 【Mybatis面试题】

    2024-07-09 23:02:01       22 阅读
  5. 环境快照:精通Conda中的conda env export命令

    2024-07-09 23:02:01       20 阅读
  6. Linux下网络编程-简易poll服务器和客户端

    2024-07-09 23:02:01       20 阅读
  7. ClickHouse表引擎概述

    2024-07-09 23:02:01       18 阅读
  8. svn常用命令

    2024-07-09 23:02:01       21 阅读
  9. 面向对象——继承、封装、多态

    2024-07-09 23:02:01       17 阅读