Element UI的el-table组件时, 外部表格的数据更新导致内部折叠行强制关闭

程序行

于 2024-12-26 17:02:49 发布

阅读量292

点赞数 1

CC 4.0 BY-SA版权

文章标签： ui vue.js javascript

本文链接：https://blog.csdn.net/Turboyiyi/article/details/144748410

el-table外面展示内容调的接口1，折叠里面的数据调接口2,。现在接口1每3.5秒刷新一次表格，接口2只有展开折叠才调用，并且希望实现：折叠展开后，不受接口1的刷新影响关闭

@expand-change="handleExpandChange" --点击折叠展开事件

el-table新增
row-key="index" :expand-row-keys="expands"

折叠组件内部：
<el-table-column type='expand'>
<template slot-scope='props' v-if=' dataLoaded'>

创建一个expends数组，用于存储展开的keys。

由关闭变展开时，将该行的下标存放进去。

由展开变关闭时，将该行的下标删除。
 const index = this.expands.indexOf(row.index);
      if (expanded) {
        if (index === -1) { // 如果该行未展开，则添加索引到 expands 数组
          this.expands.push(row.index);
        } else {
        if (index !== -1) { // 如果该行已展开，则从 expands 数组中移除索引
          this.expands.splice(index, 1);
        }
expand-row-keys 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。

 <el-table :data='tabel_data' row-class-name='my-row' @expand-change="handleExpandChange" row-key="index" :expand-row-keys="expands"
    >

async handleExpandChange(row, expanded) {
      const index = this.expands.indexOf(row.index);
      if (expanded) {
        if (index === -1) { // 如果该行未展开，则添加索引到 expands 数组
          this.expands.push(row.index);
        }
        try {
          调接口
          this.dataLoaded = true; // 添加一个标志位 
        } catch (error) {
          console.error(error);
          this.dataLoaded = false; // 如果出错，也设置标志位为 false
        }
      } else {
        if (index !== -1) { // 如果该行已展开，则从 expands 数组中移除索引
          this.expands.splice(index, 1);
        }
        this.dataLoaded = false; // 如果 expanded 为 false，也设置标志位为 false
      }
    },