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()
                  }
                }
              })
            })
          }

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