el-table表格折叠时,点某行的折叠按钮时子行内容全展开问题,想做到点哪行哪行的子内容才展示

今天遇到了el-table表格折叠时,点某行的折叠按钮时子行内容全展开问题,

想要的是点哪行哪行的子内容才展示,问题解决方案:

1、在ProTable 中加 :row-key="id" (ProTable是封装的el-table)

<ProTable
      ref="proTable"
      :columns="columns"
      :data="tableData1"
      :data-callback="dataCallback"
      :tool-button="false"
      :pagination="false"
      :height="490"
      :card="false"
      :key="componentKey"
      :row-key="id"
    >
      <template #operation="scope">
        <el-button type="primary" link :icon="EditPen" @click="openTab(scope.row)">{{
          !scope.row.flag ? t("excel.input") : t("excel.show")
        }}</el-button>
        <el-button type="primary" link :icon="Delete" @click="openDelete(scope.row)">{{ t("excel.delete") }}</el-button>
      </template>
      <el-table-column type="expand">
      <template #default="scope">
        <div>
          <el-table :data="scope.row.family" >
            <el-table-column label="Name" prop="name" />
            <el-table-column label="State" prop="state" />
            <el-table-column label="City" prop="city" />
            <el-table-column label="Address" prop="address" />
            <el-table-column label="Zip" prop="zip" />
          </el-table>
        </div>
      </template>
    </el-table-column>
    </ProTable>

2、在 tableData1 中每个对象加id值

const tableData1 = [
  {
    id: 1,
    family: [
      {
        name: 'Jerry1',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      }
    ],
  },
  {
    id: 2,
    family: [
      {
        name: 'Jerry2',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      }
    ]
  }
]

问题解决

相关推荐
baiduopenmap3 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
loooseFish11 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
请叫我欧皇i23 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_26 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
guokanglun32 分钟前
空间数据存储格式GeoJSON
前端
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY520311 小时前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
猫爪笔记1 小时前
前端:HTML (学习笔记)【2】
前端·笔记·学习·html
brief of gali1 小时前
记录一个奇怪的前端布局现象
前端
计算机毕设指导61 小时前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea