一键展开或折叠树形表格

一键展开或折叠树形表格

问题场景

现有一个树形表格，需要在表头配置一个折叠展开按钮，点击可以将所有的行折叠或者展开。

目前我们用的element UI的属性表格每次点击只能展开或折叠当前行，当数据量多或者表格层级比较多的情况下，我们就需要引入一键展开或者折叠所有行的这么一个功能。

效果如下

先来看效果

具体实现

使用el-table的default-expand-all属性设置默认折叠所有行

通过expand-row-keys属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。

<el-table
    :data="tableData"
    style="width: 100%; margin-bottom: 20px"
    :default-expand-all="isExpandAll"
    :expand-row-keys="expandRowKeys"
    row-key="id"
    border
>
</el-table

用一个Boolean类型的字段isExpandAll来控制是否展开所有行。用expandRowKeys数组来存放展开行的 keys 数组。

const data = reactive({
	isExpand: false,
    expandRowKeys: []
})

在表格中单列一列（最左列），通过自定义表头的方式，显示展开折叠图表。为展开/折叠图表绑定点击事件。

<el-table-column align="left" width="55">
    <template #header>
      <el-icon @click="expandTable" class="hover-blue" :size="20" style="top: 5px; left: -5px">
        <el-image v-show="isExpandAll" style="width: 20px"
                  :src="require('@/assets/img/expand-bottom.png')"/>
        <el-image v-show="!isExpandAll" :src="require('@/assets/img/expand-right.png')"/>
      </el-icon>

    </template>
</el-table-column>

expandTable方法，展开全部的话，遍历当前表格的所有行，将row.id添加到expandRowKeys中，如果树型表格的深度较深，可以采用递归的方法去遍历表格，添加row.id到expandRowKeys数组里。

const expandTable = () => {
  data.isExpandAll = !data.isExpandAll
  // 展开所有行
  if (data.isExpandAll) {
    data.expandRowKeys = []
    data.tableData.forEach((row) => {
      if (row.hasOwnProperty("children") || row.children.length > 0) {
        data.expandRowKeys.push(row.id)

        row.children.forEach((row2) => {
          if (row2.hasOwnProperty("children") || row2.children.length > 0) {
            data.expandRowKeys.push(row2.id)
          }
        })
      }
    })

  } else {
    //  折叠所有行
    data.expandRowKeys = []
  }
}

tableData数据：

tableData: [
{
  id: 1,
  date: '2016-05-02',
  name: 'wangxiaohu',
  address: 'No. 189, Grove St, Los Angeles',
  children: [
    {
      id: 11,
      date: '2016-05-01',
      name: 'wangxiaohu',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      id: 12,
      date: '2016-05-01',
      name: 'wangxiaohu',
      address: 'No. 189, Grove St, Los Angeles',
      children: [
        {
          id: 121,
          date: '2016-05-01',
          name: 'wangxiaohu',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          id: 122,
          date: '2016-05-01',
          name: 'wangxiaohu',
          address: 'No. 189, Grove St, Los Angeles',
        },
      ]
    },
  ],
},
{
  id: 2,
  date: '2016-05-04',
  name: 'wangxiaohu',
  address: 'No. 189, Grove St, Los Angeles',
  children: [
    {
      id: 21,
      date: '2016-05-01',
      name: 'wangxiaohu',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      id: 22,
      date: '2016-05-01',
      name: 'wangxiaohu',
      address: 'No. 189, Grove St, Los Angeles',
      children: [
        {
          id: 221,
          date: '2016-05-01',
          name: 'wangxiaohu',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          id: 222,
          date: '2016-05-01',
          name: 'wangxiaohu',
          address: 'No. 189, Grove St, Los Angeles',
        },
      ]
    },
  ],
},
{
  id: 3,
  date: '2016-05-01',
  name: 'wangxiaohu',
  address: 'No. 189, Grove St, Los Angeles',
  children: [
    {
      id: 31,
      date: '2016-05-01',
      name: 'wangxiaohu',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      id: 32,
      date: '2016-05-01',
      name: 'wangxiaohu',
      address: 'No. 189, Grove St, Los Angeles',
      children: [
        {
          id: 321,
          date: '2016-05-01',
          name: 'wangxiaohu',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          id: 322,
          date: '2016-05-01',
          name: 'wangxiaohu',
          address: 'No. 189, Grove St, Los Angeles',
        },
      ]
    },
  ],
},
{
  id: 4,
  date: '2016-05-03',
  name: 'wangxiaohu',
  address: 'No. 189, Grove St, Los Angeles',
  children: [
    {
      id: 31,
      date: '2016-05-01',
      name: 'wangxiaohu',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      id: 32,
      date: '2016-05-01',
      name: 'wangxiaohu',
      address: 'No. 189, Grove St, Los Angeles',
      children: [
        {
          id: 321,
          date: '2016-05-01',
          name: 'wangxiaohu',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          id: 322,
          date: '2016-05-01',
          name: 'wangxiaohu',
          address: 'No. 189, Grove St, Los Angeles',
        },
      ]
    },
  ]
}
],