element-plus合并单元格效果

86 阅读1分钟

// 处理合并行的数据 let pos: any const getSpanArr = (data: any, spanKey: any) => { var spanArr = []; for (var i = 0; i < data.length; i++) { if (i === 0) { spanArr.push(1); pos = 0; } else { // 判断当前元素与上一个元素是否相同 if (data[i][spanKey] === data[i - 1][spanKey]) { spanArr[pos] += 1; spanArr.push(0); } else { spanArr.push(1); pos = i; } } } return spanArr; }

const objectSpanMethod = ({ row, column, rowIndex, columnIndex, }: SpanMethodProps) => { // 处理合并列的方法 //这里时只有前五列使用合并方法,如果全表格使用,可以删除这个判断 // data 就是从这里动态传过来的
// 如果数据中有id,可以传id进行合并,更加准确 //var spanArr = this.getSpanArr(data, "id"); var spanArr = getSpanArr(tableData, column.property); const _row = spanArr[rowIndex]; const _col = _row > 0 ? 1 : 0; return { rowspan: _row, colspan: _col, }; }

const tableData = [ { color: '红色', size: '大', amount: '10', }, { color: '红色', size: '大', amount: '20', }, { color: '红色', size: '大', amount: '30', }, { color: '红色', size: '小', amount: '40', }, { color: '红色', size: '小', amount: '50', }, { color: '红色', size: '小', amount: '60', }, { color: '蓝色', size: '大号', amount: '70', }, { color: '蓝色', size: '大号', amount: '80', }, { color: '蓝色', size: '大号', amount: '90', }, { color: '蓝色', size: '小号', amount: '100', }, { color: '蓝色', size: '小号', amount: '110', }, { color: '蓝色', size: '小号', amount: '120', } ]

image.png