ElementUI组件table展开expand子项动态获取数据时，视图不更新

你的名字 2022-12-02 15:05 252阅读 0赞

最近碰到一个新的需求，先是需要获取用户组列表（做成表格），表格项可以展开，在展开的时候动态的获取所展开的用户组底下的用户列表。

# 问题描述 #

起初，我是把表格数据分开来，即外层用户组列表使用`list`数组，内层嵌套的用户列表使用`innerList`数组，两者互不干扰。然后监听外层表格的`expand-change`事件，在事件回调中配合表格属性`expand-row-keys`来控制展开的行（需求是手风琴模式，即一次最多展开一行），同时回调中去动态请求数据，数据返回后对`innerList`进行赋值。  
示例Demo代码如下：

<template> 
      
      <el-table :data="list" style="width: 100%" @expand-change="handleExpandChange" :expand-row-keys="currentExpandRow" row-key="id" > 
        <el-table-column type="expand"> 
          
          <el-table :data="innerList" style="width: 100%"> 
            <el-table-column prop="user_id" label="用户ID" />
            <el-table-column prop="nickname" label="昵称" /> 
          </el-table>
        </el-table-column> 
        <el-table-column prop="id" label="ID" /> 
     	<el-table-column prop="user_group_name" label="组名" />  
      </el-table>  
    </template>

对应的`data`还有`methods`：

<script>
    export default { 
      data() { 
        return { 
          list: [],
          innerList: [],
          currentExpandRow: []
        }
      },
      methods: { 
        // 获取某个用户组中的用户列表
        async handleExpandChange(row) { 
          const currentID = this.currentExpandRow[0] ? this.currentExpandRow[0] : ''
          if (currentID == row.id) { 
            this.currentExpandRow = []
            return
          }
          const groupID = row.id
          this.currentExpandRow = [groupID] // 控制展开行
          const res = await this.axios.post('getData', { 
            groupID
          })
          this.innerList = res.data.data.data
        }
      }
    }
    </script>

一番操作后，发现展开后数据确确实实是拿到了，可是视图却不更新，确切的讲，是不会及时更新，展开后的内嵌表格会渲染上一次拿到的数据，即第一次展开无数据，第二次展开渲染第一次获取的数据，依次类推。  
于是我便在事件的最后加上`this.$forceUpdate()`强制更新，然而并没有什么卵用。

# 如何解决？ #

首先当然还是百度，谷歌了，可是一番查找后，并没有理想的方案，网上给的方案大多用`this.$set`去处理，可实际操作起来并没有解决。  
在捣鼓的过程中，发现了`this.currentExpandRow`的赋值会触发视图的更新，于是我便在事件的最后用`$nextTick`去赋值这个变量，结果是能成功，但是常常会出现拿不到数据（空白）。  
怎么办呢？只好返回官网去找答案了。

# 解决 #

参照着官网的示例代码，我发现了好像只能在外层的`list`内部去内嵌`innerList`。  
简单点讲，就是表格组件的更新，是看最外层的`data`所绑定的变量，只要它一改变，那么视图也会相应的更新。  
改动后的Demo代码如下：

<template> 
      
      <el-table :data="list" style="width: 100%" @expand-change="handleExpandChange" :expand-row-keys="currentExpandRow" row-key="id" >
        <el-table-column type="expand">
          <template slot-scope="props">
          	
            <el-table :data="props.row.innerList" style="width: 100%">
              <el-table-column prop="user_id" label="用户ID" />
              <el-table-column prop="nickname" label="昵称" />
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="user_group_name" label="组名" />
      </el-table>
    </template>

对应的`data`还有`methods`：

<script>
    export default { 
      data() { 
        return { 
          list: [],
          currentExpandRow: []
        }
      },
      methods: { 
        // 获取某个用户组中的用户列表
        async handleExpandChange(row) { 
          const currentID = this.currentExpandRow[0] ? this.currentExpandRow[0] : ''
          if (currentID == row.id) { 
            this.currentExpandRow = []
            return
          }
          let currentIndex = 0
          this.list.some((item, index) => { 
            if (item.id === row.id) { 
              currentIndex = index
              return true
            }
          })
          const groupID = row.id
          this.currentExpandRow = [groupID] // 控制展开行
          const res = await this.axios.post('getData', { 
            groupID
          })
          this.$set(this.list[currentIndex], 'innerList', res.data.data.data)
        }
      }
    }
    </script>

我将原本的`innerList`内嵌到`list`中  
DOM中是对table-column做多一层`template`包裹，通过`props`传每一行的`innerList`作为内嵌表格的`data`；  
事件回调中去获取当前点击行的`currentIndex`，在获取数据的最后通过`$set`去做数据的赋值。  
这样做就能完美的渲染内嵌表格列表了，后续还能为内嵌表格增加分页功能！

# 总结 #

接触了UI库这么久了，感觉有些需要自定义的需求写起来还是有点费脑，不知道是本人代码水平还不够高还是官方文档不够明示，还是得继续学习！  
Keep learning…

发表评论取消回复

表情：

评论列表（有 0 条评论，252人围观）

还没有评论，来说两句吧...

相关阅读

相关【VUE系列】antv组件Chart等动态更新视图不更新

以下是我调用antv的组件，这个sale\_list会动态更新（切换项目）,但是数据更新之后视图并没有更新，是因为sale\_list一直存在，所以图表不会重新画，想要更新图

- 日理万妓/ 2023年01月21日 02:27/ 0 赞/ 295 阅读

相关基于elementui table组件竖向表格

<template> <el-table :data="tableData" style="width: 100%" :s

清疚/ 2023年01月17日 04:56/ 0 赞/ 437 阅读

相关 ElementUI table标签展开行

一、概述当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。官方示例： test.vue <template> <el-

末蓝、/ 2023年01月15日 14:30/ 0 赞/ 249 阅读

相关 vue ElementUI table 组件动态表头

页面展示从接口获取的数据到 table 里面，包括表头和表数据 html代码 <el-table :data="compareList" border size=

旧城等待，/ 2023年01月05日 12:53/ 0 赞/ 218 阅读

相关 Vue数据更新视图不更新

Vue数据更新视图不更新这里写自定义目录标题知识拓展数组数据变动，使用某些方法操作数组，变动数据时，有些方法无法被vue监测

阳光穿透心脏的1/2处/ 2022年12月20日 08:49/ 0 赞/ 182 阅读

相关 ElementUI组件table展开expand子项动态获取数据时，视图不更新

最近碰到一个新的需求，先是需要获取用户组列表（做成表格），表格项可以展开，在展开的时候动态的获取所展开的用户组底下的用户列表。问题描述起初，我是把表格数据分开来，即

你的名字/ 2022年12月02日 15:05/ 0 赞/ 253 阅读

相关 elementUI Table组件实现拖拽效果

背景使用`Element UI Table`\+`Vue`实现表格的拖拽。在`GitHub`上搜索了下发现[Sortable][]这款插件挺不错的，`Star14000

矫情吗；*/ 2022年04月22日 06:50/ 0 赞/ 549 阅读

相关 Vue+Element-ui table type="expand" 如何动态显示行的展开符

Element-ui提供了动态展开行的功能，如图（截自官方文档）： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_a

心已赠人/ 2022年03月08日 05:08/ 0 赞/ 968 阅读

相关【flutter】Expanded组件

Expanded组件是flutter中使用率很高的一个组件，它可以动态调整child组件沿主轴的尺寸，比如填充剩余空间，比如设置尺寸比例。它常常和Row或Column组合起来使

淩亂°似流年/ 2021年09月24日 05:52/ 0 赞/ 429 阅读

相关 Expanded 组件

一、参数说明： Expanded 可以用在 Row 和 Column 布局中 flex: 元素占整个父 Row /Column 的比例 chil

清疚/ 2021年09月13日 15:40/ 0 赞/ 377 阅读