解决Vue3+ElementPlus中table展开行，自动关闭且异步加载的问题

辞九门

已于 2023-06-28 21:56:02 修改

阅读量1.7k

点赞数 8

分类专栏： Vue踩坑记录文章标签： vue.js javascript 前端 elementui

于 2023-06-27 14:05:35 首次发布

本文链接：https://blog.csdn.net/qq_42461650/article/details/131413688

版权

Vue踩坑记录专栏收录该内容

4 篇文章 1 订阅

订阅专栏

在Vue3项目中使用ElementPlusUI时，遇到一个挑战：需要在外层表格展开时动态加载内嵌子表格的数据。由于官方数据结构不匹配，作者通过监听展开事件，在展开时异步获取并赋值子表格数据。然而，这导致了展开行的快速关闭。解决方案是为外层表格添加`row-key`属性，确保每一项都有唯一标识，从而正确地显示和处理子表格数据。

摘要由CSDN通过智能技术生成

问题描述

最近在做项目中遇到一个比较诡异的问题：采用Vue3+Element Plus UI框架，其中有个需求是：table表格展开行中内嵌一个子table，需要在展开的时候异步加载子table数据，而然官方的数据是外层数据和子数据是直接嵌套在一起的。这明显不符合我们的需求。

想法

首先自然想到的是，在展开事件触发的时候，请求子table数据，然后将其塞到当前展开的外层table中。项目代码如下：

// 展开事件触发
function onExpand(row, expandedRows){
  // 判断当前展开行
  if(expandedRows.find(ele => ele == row)){
    cload.value = true
    // 获取子table数据
    getNoteDetialByid(row.deliveryId).then(res=>{
      // 当前行的子数据赋值
      row.children = res.data
      cload.value = false
    }).catch(err=>cload.value = false)
  }
}

遇到的问题

其实这样是没问题的，诡异的是：展开的时候，展开行又快速关闭了，非常脑壳疼，摸索尝试了几个小时终于找到了解决的办法。

解决方法

给外层table表格添加row-key="id"属性，“id”为区分外层table数据唯一性的key,有可能唯一属性叫“rowid”或者其他什么，只要能区分外层table数据中的每一项即可。例如我的外层table格式如下：

const tableData = [
	{
		id:"131323131",
		name:"张三"
	},
	{
		id:"343243242",
		name:"李四"
	},
]
// id就为唯一性key

<!-- 外部table -->
		<el-table :data="tableData1" border style="width: 100%" @expand-change="onExpand" v-loading="pload" stripe row-key="children">
      <el-table-column type="expand">
        <template #default="props">
          <!-- 内部table -->
          <el-table :data="props.row.children" border  style="width: 100%" v-loading="cload"></el-table>
        </template>
      </el-table-column>
      <!-- 外部table -->
      <el-table-column v-for="(item,index) in Pcolumns" :key="index" :label="item.label" :prop="item.prop" :min-width="item.min_width?item.min_width:0">
      </el-table-column>
    </el-table>