element table tree default-expand-all 动态全部展开关闭功能

需求

vue项目中使用elementUI的table组件的树结果时，需要动态的展开关闭节点（在tree组件中也可以使用）。

效果

折叠状态

点击展开全部

点击折叠全部

问题

虽然elementUI提供了default-expand-all属性：

• table的default-expand-all属性
  
• tree的default-expand-all属性
  
  但是如果需要动态改变时发现没有效果。

解决方法

使用key去处理树的重载，给table(tree)添加key属性，data中定义为"".

代码

<template>
	<div>
	    <el-button v-if="!isExpand" @click="rowOpenORFold(true)">展开全部</el-button>
	    <el-button v-if="isExpand" @click="rowOpenORFold(false)">折叠全部</el-button>
	    <el-table 
			ref="multipleTableTree" 
			:data="tableData" 
			style="width: 100%" 
			border 
			row-key="id"
			:key="treeKey" 
			:default-expand-all="isExpand" 
			:tree-props="{ children: 'children' }"
		>
	      <el-table-column label="序号" type="index" width="50"></el-table-column>
	      <el-table-column label="部门" prop="name"></el-table-column>
	    </el-table>
	</div>
</template>
<script>
export default {
	data() {
	    return {
	      treeKey: '',
	      tableData: [], // 表格树数据
	      isExpand: false // 是否展开
	    }
	},
	methods: {
		// 展开或折叠全部的方法
	    rowOpenORFold(isExpand) {
	      this.treeKey = +new Date()
	      this.isExpand = isExpand
	    },
	}
}
</script>