element ui表格合并单元格

最新推荐文章于 2024-07-25 09:24:40 发布

小兔&崽子

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量916

点赞数 1

分类专栏： element UI 文章标签： vue.js elementui

本文链接：https://blog.csdn.net/weixin_49238278/article/details/115353651

版权

本文介绍了如何在Element UI表格中实现合并单元格。内容包括表格的代码展示，强调了数据扁平化的重要性，特别是对于不规则数据结构的情况。文中还提供了跨行合并的方法以及数据扁平化后的结构示例。

摘要由CSDN通过智能技术生成

element ui表格合并单元格

效果：下面数据做了一下扁平化，主要是这里的数据结构不太符合，如果你的数据结构符合遍历可以不用这一步，当然这里扁平化的时候增加了合并的行数rowspan 和序号 itemIndex。如若没这一步注意自行计算合并行数和序号。

在这里插入图片描述
表格代码：

 <el-table border
          ref="multipleTable"
          :height="tableHeight"
          :data="tableData"
          :span-method="objectSpanMethod" 
        >
          <el-table-column prop="itemIndex" fixed label="序号" width="70">
          </el-table-column>
          <el-table-column prop="itemName" label="事项名称" show-overflow-tooltip min-width="210"></el-table-column>
          <el-table-column prop="itemCode" label="实施编码" show-overflow-tooltip width="210"></el-table-column>
          <el-table-column prop="areaName" label="通办地区" show-overflow-tooltip width="100"></el-table-column>
          <el-table-column prop="applyCount" label="申办量" show-overflow-tooltip width="90"></el-table-column>
          <el-table-column prop="acceptCount" label

最低0.47元/天解锁文章

小兔&崽子

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
element ui表格合并单元格

element ui表格合并单元格效果：下面数据做了一下扁平化，主要是这里的数据结构不太符合，如果你的数据结构符合遍历可以不用这一步，当然这里扁平化的时候增加了合并的行数rowspan 和序号 itemIndex。如若没这一步注意自行计算合并行数和序号。表格代码： <el-table border ref="multipleTable" :height="tableHeight" :data="tableData"
复制链接

扫一扫

专栏目录