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

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

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

通过本文你可以学到

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

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

然后安装 UI 框架 Element Plus：

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

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

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

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

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

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

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

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

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

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

然后再改造 el-table 如下：

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

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

基于以上的思路，我们还可以做的更多，比如动态添加指定行，指定列，或者删除指定行或者列等操作，都是使用相同的思路来实现。我们来具体实践一下，这里我们需要用到 @element-plus/icons-vue，先安装一下：

然后在 main.js 中导入：

在 components 目录下新建 DynamicModifyTable.vue：

多级表头的实现比较简单，主要是通过 el-table-column 的嵌套来完成的，在 components 目录下新建 MultiHeaderTable.vue 文件：

{ if (columnIndex === 0) {

}}

tableData: [{ name: '张三', province: "上海市", city: "普陀区", address: "金沙江路 1518 弄", birth: '2016-05-02', phone: "12345678910",}, { name: '李四', birth: '2016-05-02', province: "上海市", city: "普陀区", address: '金沙江路 1517 弄', age: 19, phone: "12345678911",}, { name: '王五', birth: '2016-05-03', province: "上海市", city: "普陀区", address: '金沙江路 1519 弄', phone: "12345678912",}, { name: '赵六', birth: '2016-05-04', province: "上海市", city: "普陀区", address: '金沙江路 1516 弄', phone: "12345678913",}, { name: '孙七', birth: '2016-05-04', province: "上海市", city: "普陀区", address: '金沙江路 1516 弄', phone: "12345678913",}, { name: '周八', birth: '2016-05-04', province: "上海市", city: "普陀区", address: '金沙江路 1516 弄', phone: "12345678913",}, { name: '吴九', birth: '2016-05-06', province: "上海市", city: "普陀区", address: '金沙江路 1516 弄', phone: "12345678913",}]

}, created() {

}, methods: {

}}

}, created() {

}, methods: {

}}

}, methods: {

}}