弹性配置表头，随心所欲打造你的个性表格

2023-08-13 19:50:30

使用 Element Plus 自定义表格列：自由搭配和固定列版本

导语

表格是网站和应用程序中常见且重要的元素。它们用于以结构化的方式显示数据，并提供与数据交互的功能。Element Plus 是一款流行的 Vue.js UI 库，它提供了一个功能丰富的表格组件，允许您自定义表格列以满足您的特定需求。本文将探讨两种自定义表格列的方法：自由搭配版本和固定列版本。

自由搭配版本

自由搭配版本提供了完全的灵活性，您可以拖拽列的位置，创建二级表头，并根据需要将列分组。这种方式非常适合需要复杂表格布局和高级功能的应用程序。

实现步骤：

安装依赖项： 安装 Element Plus 和 Vue.js 等必要的依赖项。
创建表格： 在 Vue.js 组件中使用 el-table 组件创建表格。
指定列： 在 columns 属性中指定表格的列，每个列都是一个对象，包含标题、数据字段等信息。
启用拖拽： 在 treeProps 属性中指定 allowAdvanced: true 和 children: 'children'，以启用列的拖拽功能。
默认展开二级表头： 如果需要，可以在 default-expand-all 属性中指定是否默认展开所有二级表头。

固定列版本

固定列版本提供了更简单的自定义选项，您可以选择在十列中显示或隐藏哪些列。这种方式更加简单易用，适用于基本的需求。

实现步骤：

安装依赖项： 安装 Element Plus 和 Vue.js 等必要的依赖项。
创建表格： 在 Vue.js 组件中使用 el-table 组件创建表格。
指定列： 在 columns 属性中指定表格的列，每个列都是一个对象，包含标题、数据字段等信息。
默认展开二级表头： 如果需要，可以在 default-expand-all 属性中指定是否默认展开所有二级表头。

代码示例

自由搭配版本：

<template>
  <el-table :data="tableData" :columns="tableColumns" :tree-props="{allowAdvanced: true, children: 'children'}"></el-table>
</template>

<script>
import { ref } from 'vue'
import { ElTable, ElTableColumn } from 'element-plus'

export default {
  components: {
    ElTable,
    ElTableColumn,
  },
  setup() {
    const tableData = ref([
      {
        id: 1,
        name: 'John',
        age: 30,
        children: [
          {
            id: 11,
            name: 'Jack',
            age: 10,
          },
          {
            id: 12,
            name: 'Mary',
            age: 12,
          },
        ],
      },
      {
        id: 2,
        name: 'Jane',
        age: 25,
      },
    ])

    const tableColumns = ref([
      {
        prop: 'name',
        label: '姓名',
      },
      {
        prop: 'age',
        label: '年龄',
      },
    ])

    return {
      tableData,
      tableColumns,
    }
  },
}
</script>

固定列版本：

<template>
  <el-table :data="tableData" :columns="tableColumns"></el-table>
</template>

<script>
import { ref } from 'vue'
import { ElTable, ElTableColumn } from 'element-plus'

export default {
  components: {
    ElTable,
    ElTableColumn,
  },
  setup() {
    const tableData = ref([
      {
        id: 1,
        name: 'John',
        age: 30,
        children: [
          {
            id: 11,
            name: 'Jack',
            age: 10,
          },
          {
            id: 12,
            name: 'Mary',
            age: 12,
          },
        ],
      },
      {
        id: 2,
        name: 'Jane',
        age: 25,
      },
    ])

    const tableColumns = ref([
      {
        prop: 'name',
        label: '姓名',
      },
      {
        prop: 'age',
        label: '年龄',
      },
    ])

    return {
      tableData,
      tableColumns,
    }
  },
}
</script>