el-table合并
参考：
https://www.jianshu.com/p/6067708bd1ee
https://blog.csdn.net/weixin_43862642/article/details/122055745
某个列合并，前面序号也要跟着对应合并
javascript"><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 = 0indexNum = 0this.indexNumArr.push(indexNum)} else {// 判断当前元素与上一个元素是否相同if (this.list[i].statLevel === this.list[i - 1].statLevel) {this.spanArr[pos] += 1this.spanArr.push(0)} else {indexNum += 1this.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 : 0return {// [0,0] 表示这一行不显示， [2,1]表示行的合并数rowspan: _row,colspan: _col}}},getSerialNumber(index) { // 当然这个是单行的哈return this.indexNumArr[index] + 1}}合并移入效果
这个就不能加斑马线了哈,参照上面基础上写
javascript"><el-tableref="multipleTable"v-loading="listLoading":data="list":span-method="objectSpanMethod":header-cell-style="GLOBAL('HEADER_CELL_STYLE')":row-class-name="tableRowClassName"highlight-current-rowborderclass="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 = iif (i === 0) {this.spanArr.push(1)pos = 0indexNum = 0this.indexNumArr.push(indexNum)this.sameRowArr.push([indexNum])} else {// 判断当前元素与上一个元素是否相同if (this.list[i].statLevel === this.list[i - 1].statLevel) {this.spanArr[pos] += 1this.spanArr.push(0)this.sameRowArr[indexNum].push(i)} else {indexNum += 1pos = ithis.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;}
上面这些数据要画图怎么处理数据
javascript">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 = legendthis.axis = axisthis.series = series},
多个列合并移入效果要这样
javascript"><template><div class="table"><el-table:data="tableData":span-method="objectSpanMethod"borderstyle="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 = 0arr.forEach((item, index) => {if (index === 0) {spanOneArr.push(1)} else {if (item[name] === arr[index - 1][name]) { // 第一列需合并相同内容的判断条件spanOneArr[concatOne] += 1spanOneArr.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 : 0return {rowspan: _row,colspan: _col}}if (columnIndex === 1) {const _row = this.twoColumnArr[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col}}if (columnIndex === 3) {const _row = this.fourColumnArr[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col}}}}
}
</script><style lang='scss' scoped>
.table {margin-bottom: 30px;
}
</style>
遇到的问题
1. 合并单元格切换的时候一列中的数据错乱eg
javascript">// 加个样式，可能是table表格底层的计算方式问题
.table-list {& /deep/ .cell.el-tooltip {width: 100% !important;}
}
// 第二种就是直接v-if，但是有时候不起作用，到时候具体分析吧
