element表格动态合并多列

旋宝宝要开心

已于 2022-06-09 17:19:46 修改

阅读量1.5k

点赞数

分类专栏： el-table 文章标签： elementui vue.js javascript

于 2022-06-09 17:15:46 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39280563/article/details/125207054

版权

本文介绍如何在Element UI的表格中实现动态合并多列。通常，官方示例的数据是静态的，但在实际应用中，我们需要根据后端返回的数据动态处理。通过设置`span-method="objectSpanMethod"`属性，并在JavaScript中处理数据，计算合并的列数，可以实现这一功能。关键在于正确处理数据，确保后端数据按顺序排列，以便正确合并。代码注释清晰，易于理解和复制使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方给的示例Element - The world's most popular Vue UI framework

，数据是写死的。但是实际情况中，我们往往需要进行动态合并多列。所以就需要我们自己进行处理（讲道理，这个功能，我觉得官方插件可以实现）

效果图：

html部分：重点在:span-method="objectSpanMethod"属性

<el-table ref="menuTable" :data="tableData" :span-method="objectSpanMethod" style="width: 100%" border height="calc(100vh - 140px)">
    <el-table-column type="selection" width="55"> </el-table-column>
    <el-table-column prop="zIndex" label="序号" width="80"> </el-tabl