当前位置: 首页 > article >正文

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

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


http://www.kler.cn/a/427827.html

相关文章:

  • 如何使用apache部署若依前后端分离项目
  • AWS Fargate + Cloud Map + Prometheus 实现 JVM 监控方案详解
  • 控制访问权限
  • 【QT】一个简单的串口通信小工具(QSerialPort实现)
  • C/C++基础知识复习(40)
  • 响应式布局:登录界面
  • Qt Window应用程序去掉控制台窗口
  • K8S对接ceph的RBD块存储
  • 在Ubuntu-22.04 [WSL2]中配置Docker
  • go get依赖包失败,502 Bad gateway
  • C++ String(字符串)和 int(整数) 互转
  • idea连接到docker出现 org.apache.hc.client5.http.ConnectTimeoutException 异常怎么办?
  • 【教程】创建NVIDIA Docker共享使用主机的GPU
  • 网页端五子棋对战(四)---玩家匹配实现上线下线处理
  • Devtools 的作用?
  • 更新危机bug
  • 网络命令配置
  • git强制覆盖本地更改
  • transformers实现一个检索机器人(一)
  • Velero 备份k8s