el-table合并
参考：
https://www.jianshu.com/p/6067708bd1ee
https://blog.csdn.net/weixin_43862642/article/details/122055745
某个列合并，前面序号也要跟着对应合并
<el-table
:data="list"
:span-method="objectSpanMethod"
>
<el-table-column :index="getSerialNumber" align="center" type="index" width="70" label="序号" />
</el-table>
data() {
return {
list: [],
spanArr: [], // 所有行的合并数此页面中为[1,3,0,0,2,0,1]
indexNumArr: [] // 序号数组此页面中为[0,1,1,1,2,2,3]
}
},
methods: {
getSpanArr() { // 有表格数据后再去合并列
let pos = 0 // spanArr的索引
let indexNum = 0 // 序号元素
this.spanArr = [] // 初始清空
this.indexNumArr = [] // 初始清空
for (var i = 0; i < this.list.length; i++) {
if (i === 0) {
this.spanArr.push(1)
pos = 0
indexNum = 0
this.indexNumArr.push(indexNum)
} else {
// 判断当前元素与上一个元素是否相同
if (this.list[i].statLevel === this.list[i - 1].statLevel) {
this.spanArr[pos] += 1
this.spanArr.push(0)
} else {
indexNum += 1
this.spanArr.push(1)
pos = i
}
this.indexNumArr.push(indexNum)
}
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex === 1) {
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
// [0,0] 表示这一行不显示， [2,1]表示行的合并数
rowspan: _row,
colspan: _col
}
}
},
getSerialNumber(index) { // 当然这个是单行的哈
return this.indexNumArr[index] + 1
}
}
合并移入效果
这个就不能加斑马线了哈,参照上面基础上写
<el-table
ref="multipleTable"
v-loading="listLoading"
:data="list"
:span-method="objectSpanMethod"
:header-cell-style="GLOBAL('HEADER_CELL_STYLE')"
:row-class-name="tableRowClassName"
highlight-current-row
border
class="table-list"
@cell-mouse-leave="cellMouseLeave"
@cell-mouse-enter="cellMouseEnter"
>
data() {
curRowArr: [], // 当前移入索引数组 / 移入才有[1,2,3]
sameRowArr: [] // 合并之后索引数组 // [[0],[1,2,3],[4,5],[6]]
},
methods: {
getSpanArr() {
let pos = 0 // spanArr的索引
let indexNum = 0 // 序号元素
this.spanArr = [] // 初始清空
this.indexNumArr = [] // 初始清空
this.sameRowArr = [] // 初始清空
for (var i = 0; i < this.list.length; i++) {
this.list[i].index = i
if (i === 0) {
this.spanArr.push(1)
pos = 0
indexNum = 0
this.indexNumArr.push(indexNum)
this.sameRowArr.push([indexNum])
} else {
// 判断当前元素与上一个元素是否相同
if (this.list[i].statLevel === this.list[i - 1].statLevel) {
this.spanArr[pos] += 1
this.spanArr.push(0)
this.sameRowArr[indexNum].push(i)
} else {
indexNum += 1
pos = i
this.spanArr.push(1)
this.sameRowArr.push([i])
}
this.indexNumArr.push(indexNum)
}
}
},
// row_class为定义好的css样式类名
tableRowClassName({ row, rowIndex }) {
// 同一行
for (let i = 0; i < this.curRowArr.length; i++) {
if (rowIndex === this.curRowArr[i]) {
return 'row_class'
}
}
},
cellMouseEnter(row, column, cell, event) {
this.sameRowArr.forEach((arr, i) => {
if (arr.indexOf(row.index) !== -1) {
this.curRowArr = arr
}
})
},
cellMouseLeave(row, column, cell, event) {
this.curRowArr = []
},
}
style
//合并单元的触发样式
.el-table .row_class {
background-color: #b3d4f5!important;
}
上面这些数据要画图怎么处理数据
getEchartData() {
const legend = [] // ["唁电","生平","讣告"]
const axis = [] // ["单位3","单位1","单位2","单位4"]
const series = [] // [[2,1,1,3],[0,2,0,0],[0,1,3,0]]
this.list.forEach(item => {
if (!legend.includes(item.statSubLevel)) {
legend.push(item.statSubLevel)
}
if (!axis.includes(item.statLevel)) {
axis.push(item.statLevel)
}
})
for (let i = 0; i < legend.length; i++) {
const arrItem = []
for (let j = 0; j < axis.length; j++) {
arrItem[j] = 0
}
for (let k = 0; k < this.list.length; k++) {
for (let m = 0; m < axis.length; m++) {
if (this.list[k].statSubLevel === legend[i]) {
if (axis[m] === this.list[k].statLevel) {
arrItem[m] = this.list[k].total
}
}
}
}
series.push(arrItem)
}
this.legend = legend
this.axis = axis
this.series = series
},
多个列合并移入效果要这样
<template>
<div class="table">
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px"
>
<el-table-column prop="id" label="下发单位" width="180" />
<el-table-column prop="name" label="接收单位" />
<el-table-column prop="amount1" label="数值 1（元）" />
<el-table-column prop="amount2" label="数值 2（元）" />
<el-table-column prop="amount3" label="数值 3（元）" />
</el-table>
</div>
</template>
<script>
export default {
name: 'MyTable',
data() {
return {
tableData: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987122',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987122',
name: 'zhaohui',
amount1: '324',
amount2: '2.2',
amount3: 9
}, {
id: '12987122',
name: '赵慧',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987122',
name: '赵慧',
amount1: '539',
amount2: '4.1',
amount3: 15
}],
oneColumnArr: [], // 第一列合并数组
twoColumnArr: [], // 第二列合并数组
fourColumnArr: [] // 第四列合并数组
}
},
mounted() {
this.oneColumnArr = this.flitterData(this.tableData, 'id')
this.twoColumnArr = this.flitterData(this.tableData, 'name')
this.fourColumnArr = this.flitterData(this.tableData, 'amount2')
},
methods: {
flitterData(arr, name) {
const spanOneArr = []
let concatOne = 0
arr.forEach((item, index) => {
if (index === 0) {
spanOneArr.push(1)
} else {
if (item[name] === arr[index - 1][name]) { // 第一列需合并相同内容的判断条件
spanOneArr[concatOne] += 1
spanOneArr.push(0)
} else {
spanOneArr.push(1)
concatOne = index
}
}
})
return spanOneArr
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.oneColumnArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
if (columnIndex === 1) {
const _row = this.twoColumnArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
if (columnIndex === 3) {
const _row = this.fourColumnArr[rowIndex]
const _col = _row > 0 ? 1 : 0
return {
rowspan: _row,
colspan: _col
}
}
}
}
}
</script>
<style lang='scss' scoped>
.table {
margin-bottom: 30px;
}
</style>
遇到的问题
1. 合并单元格切换的时候一列中的数据错乱eg
// 加个样式，可能是table表格底层的计算方式问题
.table-list {
& /deep/ .cell.el-tooltip {
width: 100% !important;
}
}
// 第二种就是直接v-if，但是有时候不起作用，到时候具体分析吧