el-table expand-row-keys默认展开,数据更新后默认展开的问题

开发项目时遇到个问题,菜单展开后,刷新数据,再次点击收起按钮不好用了,要点两次才好使,解决方案如下:

1、table设置

<el-table
        :loading="load"
        :data="menuDataList"
        :load="loadMenuChildren"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        :expand-row-keys="expandRowKeys"
        :row-key="rowKey"
        stripe
        border
        lazy
        @expand-change="expandChange">
        <el-table-column :label="$t('menuManagement.menuName')" prop="menuName" />
        <el-table-column :label="$t('menuManagement.menuNameEn')" prop="menuNameEn" />
        </el-table-column>
      </el-table>

rowKey(row) { return row.menuNameEn },

2、点击展开收起按钮后的处理 

expandChange(expandedRows, expanded) {
      console.log(expanded)
      const index = this.expandRowKeys.indexOf(expandedRows.menuNameEn)
      if (expanded) {
        if (index == -1) {
          this.expandRowKeys.push(expandedRows.menuNameEn)
        }
      } else {
        if (index !== -1) {
          this.expandRowKeys.splice(index, 1)
        }
      }
    },

 3、数据更新后,调用如下方法

 if (this.expandRowKeys && this.expandRowKeys.length) {
            this.$nextTick(() => {
              const els = document.getElementsByClassName('el-table__expand-icon el-table__expand-icon--expanded')
              this.$nextTick(() => {
                if (els.length > 0) {
                  for (let i = 0; i < els.length; i++) {
                    els[i].click()
                  }
                }
              })
            })
          }

完结,撒花✿✿ヽ(°▽°)ノ✿

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值