elementplus怎么實現多級表格

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 的表格組件。