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

lemontree-xy2024-08-24 21:14

今天遇到了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',
      }
    ]
  }
]

问题解决