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

xuelong-ming

已于 2023-11-03 10:45:30 修改

阅读量3.2k

点赞数 2

分类专栏：前端 elementUI web 文章标签：前端 elementui vue 1024程序员节

于 2023-09-08 10:26:29 首次发布

本文链接：https://blog.csdn.net/xuelong5201314/article/details/132754490

版权

前端同时被 3 个专栏收录

56 篇文章

订阅专栏

elementUI

19 篇文章

订阅专栏

web

11 篇文章

订阅专栏

文章讲述了在Vue项目中使用ElementUItable组件实现树状结构时，如何通过设置key属性和default-expand-all来动态控制节点的展开和折叠。作者分享了代码示例，包括如何使用rowOpenORFold方法切换展开状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

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>