element-ui table span-method(行合并)的实现代码
作者:KnifeBlade 时间:2024-05-10 14:17:35
element-ui官网中关于行合并的例子是根据行号进行合并的,这显然不符合我们日常开发需求,因为通常我们table中的数据都是动态生成的,所以需要做一些修改。我们首先解读一下官网实例中的各参数的意义:
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) { //用于设置要合并的列
if (rowIndex % 2 === 0) { //用于设置合并开始的行号
return {
rowspan: 2,//合并的行数
colspan: 1 //合并的列数,设为0则直接不显示
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
研究这个例子后不难发现,实现合并行的方法其实在每一行数据渲染的时候都会执行,只不过在渲染过程中我们设置了它合并的行数和列数,以得到不同的效果。所以我们需要生成一个与行数相同的数组记录每一行设置的合并数。处理过程如下:
getSpanArr(data) {
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].name === data[i - 1].name) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
}
},
data就是我们从后台拿到的数据,通常是一个数组;spanArr是一个空的数组,用于存放每一行记录的合并数;pos是spanArr的索引。上述代码意思是:如果是第一条记录(索引为0),向数组中加入1,并设置索引位置;如果不是第一条记录,则判断它与前一条记录是否相等,如果相等,则向spanArr中添入元素0,并将前一位元素+1,表示合并行数+1,以此往复,得到所有行的合并数,0即表示该行不显示。
cellMerge({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
},
然后根据得到的数组spanArr对表格进行合并渲染,并绑定合并方法
<el-table
border
:data="tableData"
style="width: 100%;max-height: 160px;overflow: auto"
:span-method="cellMerge">
......
</el-table>
效果图如下:
注:后台获取数据的时候根据要在前台进行合并的字段进行排序,使要合并的字段值相同的记录依次相邻。
合并多行的情况
arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 1) {
// 合并第二行
if (columnIndex === 1) {
// 从第二列开始
return [2, 3]
// 这里返回的是行和列的合并数量,可以返回一个数组,也可以返回一个对象,效果一样
// 这里rowspan为2是行有两行合并,colspan为3是列有3列合并,你要合并几行几列就写上相应的数字
// 这个判断是把第一行的第3列,第4列的值省略,在合并的表格右边直接填原先第5列的值,合并了几列,就省略几列的值
} else if (columnIndex === 2 || columnIndex === 3) {
return [0, 0]
}
} else if (rowIndex === 2 && (columnIndex === 1 || columnIndex === 2 || columnIndex === 3)) {
// 第二行的第2个数,第3个数,第4个数都要省略
return [0, 0]
}
}
来源:https://blog.csdn.net/qq_29468573/article/details/80742646
标签:element-ui,table,span-method
0
投稿
猜你喜欢
vue + typescript + video.js实现 流媒体播放 视频监控功能
2024-05-09 15:10:38
利用ASP输出excel文件一例
2008-06-06 13:18:00
python的dict,set,list,tuple应用详解
2023-03-01 17:48:38
Python的加密模块md5、sha、crypt使用实例
2022-02-17 14:44:44
高并发状态下Replace Into造成的死锁问题解决
2024-01-17 10:17:37
程序员的八种境界,你在哪一境?
2022-07-19 11:22:19
Linux下安装Memcached服务器和客户端与PHP使用示例
2023-10-05 04:32:44
用FrontPage200八步快速建站
2008-09-17 10:52:00
简单谈谈Python的pycurl模块
2023-07-14 01:42:03
mysql查询表里的重复数据方法
2024-01-16 07:13:19
在OracleE数据库的字段上建立索引的方法
2009-02-26 10:34:00
MySQL中无过滤条件的count详解
2024-01-22 13:06:20
微信小程序获取当前位置的详细步骤
2024-04-08 10:52:09
Python类的继承和多态代码详解
2022-01-20 14:16:39
Python通过文本和图片生成词云图
2023-08-03 09:39:35
Python基于TensorFlow接口实现深度学习神经网络回归
2022-07-17 22:38:28
tensorflow实现残差网络方式(mnist数据集)
2023-08-10 08:33:31
Python 网络编程说明第1/2页
2023-05-07 13:25:13
Vue.js 加入高德地图的实现代码
2024-05-28 15:51:31
MySQL MyISAM 优化设置点滴
2024-01-17 11:58:17