Element UI-动态合并表格行

动态合并表格行的代码主要由 :span-method="objectSpanMethod"中objectSpanMethod方法来实现跨行或跨列合并,其代码如下：

<template><div><el-table:data="tableData":span-method="objectSpanMethod"borderstyle="width: 100%; margin-top: 20px"><el-table-columnprop="value1"label="机房"width="180"></el-table-column><el-table-columnprop="value2"label="资源分类"></el-table-column><el-table-columnprop="value3"label="设备类型"></el-table-column><el-table-columnprop="value4"label="设备总数"></el-table-column></el-table></div>
</template><script>
export default {name: 'DynamicTable',data () {return {tableData: [{value1: 'XXX5楼机房',value2: 'IT设备',value3: '服务器',value4: '23'}, {value1: 'XXX5楼机房',value2: 'IT设备',value3: '存储设备',value4: '24'}, {value1: 'XXX5楼机房',value2: 'IT设备',value3: '网络设备',value4: '25'}, {value1: 'XXX5楼机房',value2: '动力设备',value3: '配电柜',value4: '26'}, {value1: 'XXX5楼机房',value2: '动力设备',value3: 'UPS',value4: '27'}, {value1: 'XXX5楼机房',value2: '安防设备',value3: '门禁',value4: '28'}, {value1: 'XXX5楼机房',value2: '安防设备',value3: '摄像头',value4: '29'}, {value1: 'XXX6楼机房',value2: 'IT设备',value3: '服务器',value4: '23'}, {value1: 'XXX6楼机房',value2: '动力设备',value3: '配电柜',value4: '26'}, {value1: 'XXX6楼机房',value2: '动力设备',value3: 'UPS',value4: '27'}, {value1: 'XXX6楼机房',value2: '安防设备',value3: '门禁',value4: '28'}, {value1: 'XXX7楼机房',value2: '安防设备',value3: '摄像头',value4: '29'}],spanArr1: [], // 记录每一行的合并数pos1: '', // 记录索引spanArr2: [], // 记录每一行的合并数pos2: '' // 记录索引}},mounted () {this.getSpanArr(this.tableData)},methods: {// 合并行getSpanArr (data) {for (let i = 0; i < data.length; i++) { // 第一列if (i === 0) {this.spanArr1.push(1)this.pos1 = 0} else {// 判断当前元素与上一个元素是否相同if (data[i].value1 === data[i - 1].value1) {this.spanArr1[this.pos1] += 1this.spanArr1.push(0)} else {this.spanArr1.push(1)this.pos1 = i}}}for (let i = 0; i < data.length; i++) { // 第二列if (i === 0) {this.spanArr2.push(1)this.pos2 = 0} else {// 判断当前元素与上一个元素是否相同if (data[i].value1 === data[i - 1].value1 && data[i].value2 === data[i - 1].value2) {this.spanArr2[this.pos2] += 1this.spanArr2.push(0)} else {this.spanArr2.push(1)this.pos2 = i}}}},objectSpanMethod ({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) { // 第一列const _row = this.spanArr1[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col}}if (columnIndex === 1) { // 第二列const _row = this.spanArr2[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col}}}}
}
</script><style scoped></style>

最终显示的效果如下：

小结：
其实就是对表格数据进行处理，例如第一列spanArr1处理后的结果为：[7,0,0,0,0,0,0,4,0,0,0,1],第二列spanArr2处理后的结果为：[3,0,0,2,0,2,0,1,2,0,1,1]

Element UI-动态合并表格行相关推荐

VUE element ui 动态合并单元格问题
** VUE element ui 动态合并单元格问题** 1.基础方法 //最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下: //效果 //绑定 :span-me ...
Element UI动态生成多级表头
1 基础常用的原型样例我们常常遇到的情况就是表头固定的,我们需要从后端获取对应表头的信息,如果信息比较多的时候为了方便我们展示,可以固定表头和列,下面是一个我们常见的例子: 固定列和表头可以同时使用 ...
Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
动态增删表格行(纯JS写法)
动态增删表格行(纯JS写法) 归档进行表格下行的动态增加与删除 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional// ...
element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码
一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-1 ...
使用xlsx 下载 element ui 中的表格
原文链接: 使用xlsx 下载 element ui 中的表格上一篇: MongoDB 聚合下一篇: vue router 路由守卫登录验证 https://github.com/SheetJS ...
php 动态添加表格行,jQuery给html表格动态添加行方法总结
这次给大家带来jQuery给html表格动态添加行方法总结,jQuery给html表格动态添加行的注意事项有哪些,下面就是实战案例,一起来看一下. 本文实例讲述了jQuery实现html表格动态添加新 ...
vue+element ui实现树形表格加复选框（checkbox）
element ui中有带复选框的表格和树形数据的表格,不过呢,wo遇到一个新的需求,其中就是要实现树形表格和复选框的结合,尝试过很多方法,最后自己总结出一套,实现了全选,单选,多选. 效果图: 代码 ...
js如何动态添加表格行
一.总结方法一:添加可通过在table的innerHTML属性中添加tr和td来实现方法二:通过table的属性insertRow(),deleteRow()来实现方法一和方法二对比: 二.js ...

Element UI-动态合并表格行

Element UI-动态合并表格行

Element UI-动态合并表格行相关推荐

最新文章

热门文章