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

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

原文地址：https://blog.csdn.net/u010609022/article/details/144308106

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！