从来没有好好地有条理的整理过代码，也是因为没有信心能写好，今天心血来潮写一篇尝试一下。

问题描述

element ui 中 el-table 按需合并单元格
本文中代码举例，根据 project_name 字段的值进行合并

相关代码展示

 <el-table:data="table_list":span-method="arraySpanMethod"border:header-cell-style="{background:'#F0F2F5',color:'#666666',fontWeight: '400',padding: '7px 0'}"style="width: 100%; margin-top: 20px"><el-table-columntype="index"label="项目ID"width="180"></el-table-column><el-table-columnprop="project_name"label="项目名称"></el-table-column><el-table-columnprop="event_name"label="事件名称"></el-table-column></el-table>

span-method 是element ui 提供的合并行或列的计算方法

 export default {name: 'app',components: {},data(){return {table_list: [{project_name: '项目一',event_name: '项目一事件一'},{project_name: '项目一',event_name: '项目一事件二'},{project_name: '项目二',event_name: '项目二事件一'},{project_name: '项目三',event_name: '项目三事件一'},{project_name: '项目三',event_name: '项目三事件一'},],mergeArr: [],  //遍历数据时，根据相同的标识去存储记录mergePos: 0, // 数组mergeArr的索引}},created(){// 要合并的数组的方法this.merge(this.table_list)// 如果是通过调接口获取的table数据，则需要在 this.table_list = res.list 之后 this.merge(this.table_list)},methods:{// 合并table数据 table有多少单元格，该函数执行多少次arraySpanMethod({ row, column, rowIndex, columnIndex }) {// row：行，column：列 ，rowIndex:0,当前行号，columnIndex:0,当前列号，// [rowIndex，columnIndex]定位到某个具体的单元格// 要合并的是哪一列，columnIndex就等于几if (columnIndex === 1) {const _row = this.mergeArr[rowIndex];// _row的值表示 从 columnIndex 列开始往下合并几个格子，值>0：值为几表示合并几个格子，值<=0：该单元格已向上合并const _col = _row > 0 ? 1 : 0; //如果_col == 0，则这个单元向上合并return {rowspan: _row,colspan: _col,};// 需要被向上合并的单元格 return{ rowspan:0,colspan: 0 }}},// 要合并的数组的方法merge(tableData) {this.mergeInit();for (var i = 0; i < tableData.length; i++) {if (i === 0) {// 如果是第一条记录直接往数组push,第一条记录必须存在，不用考虑合并与否this.mergeArr.push(1);this.mergePos = 0;} else {// 不是第一条记录的情况，则下一个元素与上一个元素进行对比，判断是否相同，相同则合并// 判断当前元素与上一个元素是否相同，project_name为判断条件if (tableData[i].project_name === tableData[i - 1].project_name) {// 需要合并的情况，合并的格子数+1this.mergeArr[this.mergePos] += 1;// 向上合并的单元格也要 用 0 占位this.mergeArr.push(0);} else {this.mergeArr.push(1);this.mergePos = i;}}// console.log(this.mergeArr);// table根据 this.mergeArr里面的值来进行单元格的合并}},mergeInit() {//页面展示的数据，不一定是全部的数据，所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造成数据渲染混乱this.mergeArr = [];this.mergePos = 0;},}}

参考文献

参考文章1
参考文章2

element ui el-table单元格按需合并相关推荐

Element UI 的 table 单元格合并
项目中遇到表格单元格合并的需求,在此记录整个解决过程. 项目使用的是 Element UI,表格使用的是 table 组件.Element UI 的 table 表格组件中对单元格进行合并,需要使用 ...
element ui 的table单元格合并
element ui中的table表格数据是动态生成的,如果说后台要求我们对单元格进行合并,这个时候需要借助一个api,:span-method="arraySpanMethod" ...
Element UI 中table合并单元格
Element UI组件库合并table单元格函数封装 DOM: <el-table:data="tableData"size="mini"class=& ...
Element Table 单元格中嵌套表格（Table）合并行效果
在Element中实现表格合并行功能一般是通过自定义span-method方法,此方法要求表格数据源中需要合并行的单元格中数据相同,根据相同数据来实现合并算法. 本例通过在父Table单元格中嵌套子T ...
php td内容换行,table单元格内容过多换行显示
节目名称所属电视台版本开始时间结束时间获取时间操作 [#if list][#list list.items as t] ${t.program}${t.channelName}${t.__v}${t. ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
css表格强制不换行符,css控制table单元格强制换行与强制不换行
css 我们先看一下css手册中,对于list-style地解释: 定义和用法 list-style 简写属性在一个声明中设置所有地列表属性. 说明该属性是一个简写属性,涵盖了所有其他列表样式属性. ...
IVIEW组件中Table单元格可编辑、加入各种图表
后端项目地址:https://gitee.com/wlovet/table-server 前端项目地址:https://gitee.com/wlovet/table-project 一.Render函 ...
Vue.js 根据数据，进行Table单元格合并
Vue.js 根据数据,进行Table单元格合并 ITKouSyou 2018-10-16 14:29:40 3493 收藏 2 展开表格代码 <table cellspacing=&q ...

element ui el-table单元格按需合并

问题描述

相关代码展示

参考文献

element ui el-table单元格按需合并相关推荐

最新文章

热门文章