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

部分代码:

<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);
         }
   });
 },

疑问:我看很多博客使用 this.expandRowKeys=[]是有效关闭展开行的,我也不知道为什么我的不行

你可能感兴趣的:(vue,javascript,前端,vue.js)