一键展开或折叠树形表格

问题场景

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

目前我们用的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',},]},]
}
],