el-table合并单元格

原效果：

这样看起来就很难受，用户体验极其不好，所以，我们把相同的单元格进行合并。

直接上代码

<el-table v-loading="loading" :data="AstationFxList":stripe="true":span-method="objectSpanMethod" //加入这个方法
</el-table>

在你查询出来所有数据的方法中

getList() {this.loading = true;listAstationFx(this.queryParams).then(response => {this.AstationFxList = response.rows;this.getSpanArr(this.AstationFxList); //把数据添加到这个方法中this.total = response.total;this.loading = false;});},

编写此 getSpanArr（）方法

//获取合并配置明细getSpanArr(data) {// data就是我们从后台拿到的数据this.spanArr = [];this.pos = 0;this.spanArrdfytsl = [];//合并电费用途统计数量this.posdfytsl = 0;//合并电费用途统计数量索引for (var i = 0; i < data.length; i++) {if (i === 0) {//设置table表格行号、设置合并参数，以便相同参数合并this.spanArr.push(1);this.pos = 0;} else {// 判断当前元素与上一个元素是否相同if (data[i].city === data[i - 1].city) {this.spanArr[this.pos] += 1;this.spanArr.push(0);}else{this.spanArr.push(1);this.pos = i;}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;}//如果我们合并的是多列，那么就继续if()else,但是要将数据添加的数组要重新声明。if (data[i].sumdfyfv === data[i - 1].sumdfyfv) {this.spanArrdfytsl[this.posdfytsl] += 1;this.spanArrdfytsl.push(0);}else{this.spanArrdfytsl.push(1);this.posdfytsl = i;}}}},

最后合并

//合并单元格objectSpanMethod({row, column, rowIndex, columnIndex}) {if(columnIndex ===0 ){const _row = this.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col}}if(columnIndex === 1){const _row = this.spanArrdfytsl[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col}}},

最后效果图

此文章是为了记录遇到的问题，方便以后的查看。

el-table合并单元格相关推荐

Table合并单元格，表格居中，内容居中显示
例如:新建一张四行四列的表格,第一行的四列合并,第二.三.四行的第一列合并在一起居中显示 <%@ page language="java" contentType=" ...
element plus的table合并单元格
element的table合并单元格就element+中的el-table中的span-method方法的使用和遇到的一些问题如果想要将后一列挨着的单元格合并,return 1,2,但是得将后一个 ...
vue中用table_Vue中table合并单元格用法
地名结果人名性别 {{item.name}} 已完成未完成 {{item.groups[0].name}} {{item.groups[0].sex}} {{item.groups[son]. ...
js实现 table合并单元格
** table合并单元格 function uniteTdCells(tableId){var table = document.getElementById(tableId);for (let i ...
vue原生table合并单元格
vue原生table合并单元格 <table border="1"><thead><tr><th>学习</th>< ...
table合并单元格_制作课程表3——合并单元格
由于浏览器兼容问题,. 以及很少被使用, 所以我们将课程表依然使用tr.td元素,结合样式实现出前面案例中效果原来代码: 课程1 课程2 课程3 课程4 课程5 课程1 课程2 课程3 课程4 课 ...
table合并单元格宽度自适应
table中合并单元格导致的css样式不同处理方式: 1.每行都拆成一个table. 2.多设置几个单元格的宽度(自适应失效.第一列都设置宽度也有可能失效).
table合并单元格_element ui el-table 合并单元格
element ui table 的合并单元格或者测试 vue 文件 <template><div><el-table:data="tableData&qu ...
bootstrap table合并单元格mergeCell
//对应第一个合并的单元格 mergeCells = function(data, fieldName, colspan, target) { var sort = Array(); ...
table合并单元格
遇到这种设计,记录一下 <el-table:data="tableDataNew":span-method="objectSpanMethod"borde ...

el-table合并单元格

el-table合并单元格

el-table合并单元格相关推荐

最新文章

热门文章