在 Vue3 + Element Plus 中生成动态表格，动态修改表格，多级表头，合并单元格

本文完整版：《在 Vue3 + Element Plus 中生成动态表格，动态修改表格，多级表头，合并单元格》

在 Vue 中，表格组件是使用频率及复杂度排名第一的组件，前端经常需要根据后台返回的数据动态渲染表格，比如动态表格如何生成，因为表格的列并不是固定的，在未知表格具体有哪些列的场景下，前端如何动态渲染表格数据。又或者需要把表格单元格进行合并处理，比如第一列是日期，需要把相同的日期进行合并，这样表格看起来会更加清晰。 本文手把手教你如何在 Vue3 + Element Plus 中创建表格、生成动态表格、创建动态多级表头、表格行合并、列合并等问题。

如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用卡拉云 ，卡拉云是新一代低代码开发工具，可一键接入常见数据库及 API ，无需懂前端，仅需拖拽即可快速搭建属于你自己的后台管理工具，一周工作量缩减至一天，详见本文文末。

通过本文你可以学到

• 如何在 Element Plus 中生成动态表格
• 如何在 Element Plus 中动态修改表格
• 如何在 Element Plus 中创建动态多级表头

先来展示个「动态修改表格」的最终效果图吧

Vue3 + Element Plus 配置环境

先使用 vue-cli 初始化应用，这里我们选择 vue3 的版本：

vue create kalacloud-vue3-element-plus-table
// OR
npx vue create kalacloud-vue3-element-plus-table

然后安装 UI 框架 Element Plus：

npm install element-plus --save
// OR
yarn add element-plus

安装完成后，在项目里导入 ElementPlus，修改 main.js 如下：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

导入后，就可以启动项目了，执行以下命令：

看到以下界面说明项目成功启动了！后面就可以进入本教程的正式内容了。

Vue3 + Element Plus 生成动态表格

有一个场景是表格列并不是固定的，不能在前端写死，而是需要通过后端返回的数据进行动态渲染，比如后端返回了如下的表头数据：

tableHeader: {
  name: "姓名",
  birth: "生日",
  address: "地址",
  age: "年龄",
  phone: "电话",
}

这个对象中的 key 对应表格数据中的 prop，value 对应实际显示的 label，这样通过一个简单的对象，就可以连接表头和 表格body 之间的关系。然后还需要后端返回具体的表格数据：

tableData: [{
  name: '张三',
  date: '2016-05-02',
  address: '上海市普陀区金沙江路 1518 弄',
  age: 18,
  phone:"12345678910",
}, {
  date: '2016-05-04',
  name: '李四',
  address: '上海市普陀区金沙江路 1517 弄',
  age: 19,
  phone:"12345678911",
}, {
  date: '2016-05-01',
  name: '王五',
  address: '上海市普陀区金沙江路 1519 弄',
  age: 20,
  phone:"12345678912",
}, {
  date: '2016-05-03',
  name: '赵六',
  address: '上海市普陀区金沙江路 1516 弄',
  age: 21,
  phone:"12345678913",
}]

实现表格列动态渲染的功能，需要用到一个很关键的 vue 指令，那就是 v-for，v-for 不仅可以遍历数据，也可以遍历对象：

<div v-for="(value, key) in object">
  {
  { key }}: {
  { value }}
</div>

这里我们就需要用到这个特性，来对 tableHeader 进行遍历，获取 key 和 value。基于以上讲解，现在我们具体实践一下如何实现表格列的动态渲染。在 components 目录中新建 DynamicTable.vue：

<template>
  <div>
    <h2>Vue3 + Element plus 动态表格</h2>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        :prop="index"
        :label="item"
        v-for="(item, index) in tableHeader"
        :key="index"
      >
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {
      tableHeader: {
        name: "姓名",
        birth: "生日",
        address: "地址",
        age: "年龄",
        phone: "电话",
      },
      tableData: [{
        name: '张三',
        address: '上海市普陀区金沙江路 1518 弄',
        birth: '2016-05-02',
        age: 18,
        phone: "12345678910",
      }, {
        name: '李四',
        birth: '2016-05-04',
        address: '上海市普陀区金沙江路 1517 弄',
        age: 19,
        phone: "12345678911",
      }, {
        name: '王五',
        birth: '2016-05-01',
        address: '上海市普陀区金沙江路 1519 弄',
        age: 20,
        phone: "12345678912",
      }, {
        name: '赵六',
        birth: '2016-05-03',
        address: '上海市普陀区金沙江路 1516 弄',
        age: 21,
        phone: "12345678913",
      }]
    }
  },
}
</script>

组件编写完成后，修改 App.vue，导入该组件即可：

<template>
  <DynamicTable />
</template>

<script>
import DynamicTable from './components/DynamicTable.vue'

export default {
  name: 'App',
  components: {
    DynamicTable
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

保存后页面会自动热更新，实现效果如下：

这个只是比较基本的使用，如果某些列有一些定制需求，比如需要支持根据日期排序，这个时候可以对 tableHeader 进行改造，使 value 是一个对象，这样就可以携带更多的表头配置信息：

tableHeader: {
  name: {
    label: "姓名",
    sort: true,
  },
  birth: {
    label: "生日",
    sort: false,
  },
  address: {
    label: "地址",
    sort: false,
  },
  age: {
    label: "年龄",
    sort: true,
  },
  phone: {
    label: "电话",
    sort: false,
  }
},

然后再改造 el-table 如下：

<el-table-column
  :prop="index"
  :label="item.label"
  v-for="(item, index) in tableHeader"
  :sortable="item.sort"
  :key="index"
>

以上就实现了基于动态列的表头配置，这里的关键在于 tableHeader 的数据结构如何定义，可以把列信息都放在 tableHeader 中，然后再通过 v-for 循环列就可以渲染出对应的表格列。当然 tableHeader 也可以是一个数组，使用方法都是类似的，大家可以自己去尝试一下。

扩展阅读：《多款好用的 vue 表单设计器推荐测评》