Element Plus 怎么实现多级表格

Element Plus 是一个基于 Vue 3 的 UI 组件库，提供了丰富的组件来帮助开发者快速构建现代化的 Web 应用。在实际开发中，我们经常会遇到需要展示多级表格的需求，比如展示树形结构的数据。Element Plus 提供了 el-table 组件，结合 el-table-column 和 el-table-column-group，可以轻松实现多级表格的展示。

1. 基本用法

首先，我们需要在项目中引入 Element Plus 的 el-table 组件。假设你已经安装并配置好了 Element Plus，接下来我们可以通过以下代码来实现一个简单的多级表格。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column label="姓名" width="180">
      <el-table-column prop="name.firstName" label="名" width="120"></el-table-column>
      <el-table-column prop="name.lastName" label="姓" width="120"></el-table-column>
    </el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2023-10-01',
          name: {
            firstName: '张',
            lastName: '三'
          },
          address: '北京市朝阳区'
        },
        {
          date: '2023-10-02',
          name: {
            firstName: '李',
            lastName: '四'
          },
          address: '上海市浦东新区'
        },
        {
          date: '2023-10-03',
          name: {
            firstName: '王',
            lastName: '五'
          },
          address: '广州市天河区'
        }
      ]
    }
  }
}
</script>

在这个例子中，我们定义了一个 tableData 数组，其中包含了表格的数据。el-table 组件的 data 属性绑定了这个数组。在 el-table-column 中，我们通过嵌套的方式实现了多级表头。name 字段被分成了 firstName 和 lastName 两个子列。

2. 树形表格

除了多级表头，Element Plus 还支持树形表格的展示。树形表格通常用于展示具有层级关系的数据，比如组织结构、文件目录等。

<template>
  <el-table
    :data="tableData"
    row-key="id"
    default-expand-all
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2023-10-01',
          name: '张三',
          address: '北京市朝阳区',
          children: [
            {
              id: 2,
              date: '2023-10-02',
              name: '李四',
              address: '上海市浦东新区'
            },
            {
              id: 3,
              date: '2023-10-03',
              name: '王五',
              address: '广州市天河区'
            }
          ]
        }
      ]
    }
  }
}
</script>

在这个例子中，我们通过 row-key 属性指定了每一行的唯一标识符 id，并通过 tree-props 属性指定了子节点的字段 children。default-expand-all 属性表示默认展开所有行。

3. 自定义表头

有时候我们需要在表头中添加一些自定义内容，比如图标、按钮等。Element Plus 提供了 header 插槽来实现这一需求。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
      <template #header>
        <span>日期</span>
        <el-icon><info-filled /></el-icon>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
import { InfoFilled } from '@element-plus/icons-vue'

export default {
  components: {
    InfoFilled
  },
  data() {
    return {
      tableData: [
        {
          date: '2023-10-01',
          name: '张三',
          address: '北京市朝阳区'
        },
        {
          date: '2023-10-02',
          name: '李四',
          address: '上海市浦东新区'
        },
        {
          date: '2023-10-03',
          name: '王五',
          address: '广州市天河区'
        }
      ]
    }
  }
}
</script>

在这个例子中，我们通过 header 插槽在表头中添加了一个图标。InfoFilled 是 Element Plus 提供的一个图标组件。

4. 总结

Element Plus 提供了强大的表格组件，能够轻松实现多级表格、树形表格以及自定义表头等复杂需求。通过合理使用 el-table 和 el-table-column，我们可以快速构建出功能丰富、样式美观的表格组件。

在实际开发中，根据具体需求选择合适的表格展示方式，可以大大提升用户体验。希望本文能帮助你更好地理解和使用 Element Plus 的表格组件。