1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > el-table合并单元格-行合并

el-table合并单元格-行合并

时间:2022-10-06 21:59:12

相关推荐

el-table合并单元格-行合并

合并单元格,如果id列值一致,则合并

原理

1、getSpanArr(data)方法 data就是我们从后台拿到的数据,通常是一个数组;

2、spanArr是一个空的数组,用于存放每一行记录的合并数;

3、 pos是spanArr的索引。

如果是第一条记录(索引为0),向数组中加入1,并设置索引位置;

如果不是第一条记录,则判断它与前一条记录是否相等,

如果相等,则向spanArr中添入元素0,并将前一位元素+1,表示合并行数+1,

以此往复,得到所有行的合并数,0即表示该行不显示

<template><div style="padding:20px"><el-table :data="tableData6" :span-method="objectSpanMethod" border ><el-table-column prop="id" label="ID" width="180"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="amount1" label="数值 1(元)"></el-table-column></el-table></div>

<script>export default {data() {return {spanArr: [],//用于存放每一行记录的合并数tableData6: [{id: "1",name: "王小虎",amount1: "234"},{id: "1",name: "王小虎",amount1: "165"},{id: "2",name: "王小虎",amount1: "324"},{id: "2",name: "王小虎",amount1: "621"},{id: "2",name: "王小虎",amount1: "539"}]};},mounted: function() {this.getSpanArr(this.tableData6);},methods: {getSpanArr(data) {// data就是我们从后台拿到的数据for (var i = 0; i < data.length; i++) {if (i === 0) {this.spanArr.push(1);this.pos = 0;} else {// 判断当前元素与上一个元素是否相同if (data[i].id === data[i - 1].id) {this.spanArr[this.pos] += 1;this.spanArr.push(0);} else {this.spanArr.push(1);this.pos = i;}}console.log(this.spanArr);}},objectSpanMethod({row, column, rowIndex, columnIndex }) {if (columnIndex === 0 || columnIndex === 1) {const _row = this.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;console.log(`rowspan:${_row} colspan:${_col}`);return {// [0,0] 表示这一行不显示, [2,1]表示行的合并数rowspan: _row,colspan: _col};}}}};</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。