Element Plus ＜el-table＞组件之展开行Table在项目中使用

官方样式：

展开前：

展开：

原始代码：

代码详解：

项目使用场景：

完成效果：

具体实现范本：

1.调整数据结构

2. 修改标签和数据绑定

3. JavaScript 部分导入和创建对象

4.注意

官方样式：

展开前：

展开：

原始代码：

<template>
  switch parent border: <el-switch v-model="parentBorder" /> switch child
  border: <el-switch v-model="childBorder" />
  <el-table :data="tableData" :border="parentBorder" style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <p m="t-0 b-2">State: {{ props.row.state }}</p>
          <p m="t-0 b-2">City: {{ props.row.city }}</p>
          <p m="t-0 b-2">Address: {{ props.row.address }}</p>
          <p m="t-0 b-2">Zip: {{ props.row.zip }}</p>
          <h3>Family</h3>
          <el-table :data="props.row.family" :border="childBorder">
            <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>
    <el-table-column label="Date" prop="date" />
    <el-table-column label="Name" prop="name" />
  </el-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const parentBorder = ref(false)
const childBorder = ref(false)
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
]
</script>

代码详解：

首先，根据 v-model 指令，在 Vue 的 setup() 中定义了 parentBorder 和 childBorder 两个响应式变量，分别用于控制父表格和子表格的边框显示与隐藏。
然后，通过传入数据数组 tableData 给 <el-table> 的 :data 属性，将数据渲染为表格。同时，使用 :border 属性绑定了 parentBorder 和 childBorder 变量，以实现动态控制表格边框的显示与隐藏。
在表格中，使用 <template> 标签和 #default 的语法糖来定义扩展列中的内容。扩展列通过点击图标或者行展开按钮来显示更多详细信息。
在扩展列中，使用了 <el-table> 嵌套来展示家庭成员的信息。同样地，也使用了 :border 属性绑定了 childBorder 变量，以便动态控制子表格边框的显示。
在展示每个家庭成员的信息时，使用了 <p> 和 <h3> 标签来显示不同的文本内容，其中 <h3> 标签用于显示 "Family" 这个标题。

项目使用场景：

项目中有一对多的数据想要展示，例如：一个团队对应多个成员，父表格展示团队信息，子表格展示对应成员信息

完成效果：

父表格展示团队信息，子表格展示对应成员信息

具体实现范本：

1.调整数据结构

根据你的数据库中的表结构，创建一个适当的数据结构来存储团队信息和成员信息。可以使用 JavaScript 对象或数组的形式来表示
const teamData = [
  {
    teamName: 'Team A',
    teamMembers: [
      { name: 'John', age: 25, position: 'Manager' },
      { name: 'Alice', age: 30, position: 'Developer' },
      { name: 'Bob', age: 28, position: 'Designer' }
    ]
  },
  {
    teamName: 'Team B',
    teamMembers: [
      { name: 'Mike', age: 32, position: 'Manager' },
      { name: 'Sarah', age: 27, position: 'Developer' },
      { name: 'Emily', age: 29, position: 'Designer' }
    ]
  },
  // ... 可以添加更多的团队信息
];
在这个例子中，teamData 数组包含了多个团队对象，每个团队对象都有团队名称 teamName 和团队成员数组 teamMembers。

每个团队成员对象都包含了成员的姓名 name、年龄 age 和职位 position

2. 修改标签和数据绑定
<el-table :data="teamData" :border="parentBorder" style="width: 100%">
  <el-table-column type="expand">
    <template #default="props">
      <div>
        <h3>Team Name: {{ props.row.teamName }}</h3>
        <el-table :data="props.row.teamMembers" :border="childBorder">
          <el-table-column label="Name" prop="name" />
          <el-table-column label="Age" prop="age" />
          <el-table-column label="Position" prop="position" />
        </el-table>
      </div>
    </template>
  </el-table-column>
  <el-table-column label="Team Name" prop="teamName" />
</el-table>
在这个修改后的代码中，将标签中的 tableData 修改为 teamData。在父表格中，使用 teamData 数组作为数据源，并绑定到 <el-table> 的 :data 属性上。

在扩展列中，使用 props.row 来获取当前团队对象的信息，包括团队名称和团队成员数组。然后通过嵌套的 <el-table> 组件来展示每个团队成员的信息，使用 props.row.teamMembers 作为数据源。

<el-table-column> 标签中的 prop 属性与数据对象的属性名进行绑定，以正确地显示每个成员的姓名、年龄和职位。

3. JavaScript 部分导入和创建对象
import { ref } from 'vue';

// ...

const parentBorder = ref(false);
const childBorder = ref(false);
const teamData = [
  // 数据结构和示例中的相同
];
在这个示例代码中，导入了 ref 函数，并在 setup() 中使用它来创建父表格和子表格边框的开关变量 parentBorder 和 childBorder。
你可以根据需要设置默认的开关状态，或者根据用户的操作来改变它们的值。
通过以上步骤，你已经成功地修改了代码，使其能够展示父表格和子表格，并以团队信息和成员信息的形式呈现。请根据你的实际情况调整数据结构和样式，并根据需求修改其他相关部分

4.注意

对于 teamMember 的类型定义，可以使用一个包含成员信息的对象数组。每个成员对象可以包含学号、姓名、专业、年级等属性
interface TeamMember {
  studentID: string;
  studentName: string;
  major: string;
  grade: string;
  lab: string;
}

interface Team {
  teamName: string;
  projectName: string;
  projectIntro: string;
  coach: string;
  contest: string;
  award: string;
  teamMember: TeamMember[];
}
在这个定义中，teamMember 属性的类型被修改为 TeamMember[]，表示一个 TeamMember 对象的数组。每个 TeamMember 对象包含了学生的学号、姓名、专业、年级等信息。