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',
      }
    ]
  }
]

问题解决

相关推荐
麦麦大数据7 分钟前
基于vue+neo4j 的中药方剂知识图谱可视化系统
vue.js·知识图谱·neo4j
customer0812 分钟前
【开源免费】基于SpringBoot+Vue.JS医院管理系统(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·开源·intellij-idea
理想不理想v25 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我26 分钟前
浏览器交互事件汇总
前端·交互
小阮的学习笔记39 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜40 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=40 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
杨荧42 分钟前
【JAVA毕业设计】基于Vue和SpringBoot的服装商城系统学科竞赛管理系统
java·开发语言·vue.js·spring boot·spring cloud·java-ee·kafka
minDuck44 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js