Element Plus 如何为 Vue 3 实现嵌套表格和行展开功能？

2023-12-30 15:04:43

在 Vue 3 中使用 Element Plus 构建交互式嵌套表格：深入指南

在现代应用程序开发中，表格是至关重要的交互元素，它们允许用户可视化、管理和分析数据。使用合适的框架和组件库，可以轻松创建交互式且直观的表格。Vue 3 和 Element Plus 是构建复杂表格界面的理想选择，提供嵌套表格和行展开功能，使您的应用程序更加强大和用户友好。

嵌套表格：展现层次结构数据

嵌套表格允许您组织具有层次结构的数据，例如具有父行和子行的树状结构。这在需要表示复杂关系或层级时非常有用。使用 Vue 3 和 Element Plus，您可以通过嵌套 el-table-column 指令轻松创建嵌套表格。

<template>
  <el-table :data="data">
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="age" label="Age" />
    <el-table-column>
      <template #default="scope">
        <el-button @click="toggleChildren(scope.row)">
          {{ scope.row.children ? 'Collapse' : 'Expand' }}
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

toggleChildren 方法负责展开或折叠子行。通过在 v-for 指令中使用 row.children，您可以访问子行数据并根据需要显示或隐藏它们。

行展开：深入了解数据

行展开功能允许您在点击一行时显示更多详细信息。这在需要提供附加上下文或允许用户在不离开表格的情况下编辑数据时非常方便。使用 Element Plus，您可以使用 el-table-row-expansion 指令实现行展开。

<template>
  <el-table :data="data">
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="age" label="Age" />
    <el-table-column>
      <template #default="scope">
        <el-button @click="toggleChildren(scope.row)">
          {{ scope.row.children ? 'Collapse' : 'Expand' }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-row-expansion v-model="row.childrenVisible">
      <el-table :data="row.children">
        <el-table-column prop="name" label="Name" />
        <el-table-column prop="age" label="Age" />
      </el-table>
    </el-table-row-expansion>
  </el-table>
</template>

通过使用 v-model 指令绑定 row.childrenVisible，您可以控制行展开的状态。当展开一行时，其子行数据将在嵌入式表格中显示。

代码示例

以下是一个完整的 Vue 3 组件，展示了如何使用 Element Plus 实现嵌套表格和行展开功能：

<template>
  <el-table :data="data">
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="age" label="Age" />
    <el-table-column>
      <template #default="scope">
        <el-button @click="toggleChildren(scope.row)">
          {{ scope.row.children ? 'Collapse' : 'Expand' }}
        </el-button>
      </template>
    </el-table-column>
    <el-table-row-expansion v-model="row.childrenVisible">
      <el-table :data="row.children">
        <el-table-column prop="name" label="Name" />
        <el-table-column prop="age" label="Age" />
      </el-table>
    </el-table-row-expansion>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          name: 'John Doe',
          age: 30,
          children: [
            {
              name: 'Jane Doe',
              age: 5
            },
            {
              name: 'Jack Doe',
              age: 8
            }
          ]
        },
        {
          name: 'Mary Smith',
          age: 40,
          children: [
            {
              name: 'Bob Smith',
              age: 10
            },
            {
              name: 'Alice Smith',
              age: 12
            }
          ]
        }
      ]
    }
  },
  methods: {
    toggleChildren(row) {
      row.childrenVisible = !row.childrenVisible
    }
  }
}
</script>