el-table使用expand-row-keys绑定数组展开行后，设置数组为空，关闭展开行无效（解决办法）

最新推荐文章于 2024-08-08 21:52:27 发布

豆逗逗

最新推荐文章于 2024-08-08 21:52:27 发布

阅读量6.3k

点赞数 5

分类专栏： vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_38345306/article/details/124899997

版权

vue 专栏收录该内容

105 篇文章 4 订阅

订阅专栏

博客讨论了在Vue项目中遇到的一个问题，即在尝试使用`this.expandRowKeys=[]`重置el-table的展开行时，方法无效。作者提供了一个解决方案，即在重置方法中首先清空expandRowKeys，然后调用`closeExpandRow`方法递归关闭所有展开行，确保所有子级都正确关闭。此外，还指出了一些博客上的常见解决办法可能并不适用于所有情况。

摘要由CSDN通过智能技术生成

部分代码：

<el-table
            :data="tableData"
            row-key="id"
            :header-cell-style="{ 'background': '#F5F7FA' }"
            :cell-style="cellStyle"
            style="width: 100%"
            height="calc(100% - 47px)"
            ref="tableref"
            :expand-row-keys="expandRowKeys"
            :tree-props="{children: 'childList', hasChildren: 'hasChildren'}"
            @selection-change="handleSelectionChange">

data(){
	return{
		expandRowKeys:[]
	}
}
//重置页面方法
reset(){
	this.expandRowKeys=[]//该方法无效，查询出来的数据还是有展开行
	this.search()
}

解决办法：

//重置页面方法
async resetForm(){
        this.expandRowKeys=[]//这一句要加上，要不然“closeExpandRow()”方法对已展开的行无效
        await this.closeExpandRow(this.tableData,false)//关闭所有展开行
        this.search()
 },
  // 关闭所有展开行
closeExpandRow(data,isExpansion){
     data.forEach((item) => {
         this.$refs.tableref.toggleRowExpansion(item, isExpansion);
         if (item.childList.length>0) {
             this.closeExpandRow(item.childList, isExpansion);
         }
   });
 },