自学内容网 自学内容网

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
    })
}

 

 


原文地址:https://blog.csdn.net/sinat_34896766/article/details/140145491

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!