el-table根据指定字段合并行和列+根据屏幕高度实时设置el-table的高度

html代码

<template><div class="rightBar"><cl-table ref="tableData"border :span-method="arraySpanMethod" :data="tableData" :columns="columns":max-height="maxHeight" row-key="id" cell-default></cl-table></div>
</template>

script代码

import arraySpanMethod from '@/mixin/arraySpanMethod'
export default{mixins: [arraySpanMethod],data(){//表格数据tableData: [],maxHeight: 500,columns:[{label: "业务大类",prop: "busi",align: "center",render: (vn, row, index) => {return (<div>{row.busi && <span>{row.busi}</span>}{!row.busi && <span style="color:#cccccc">--</span>}</div>)}},{label: "业务细类",prop: "busiDetail",align: "center",render: (vn, row, index) => {return (<div>{row.busiDetail && <span>{row.busiDetail}</span>}{!row.busiDetail && <span style="color:#cccccc">--</span>}</div>)}},]},watch: {tableData: {deep: true,immediate: true,handler: function (val) {if (val.length) {this.$nextTick(() => {// 调用this.mergeCell需要满足两个条件:1.tableData数据改变 2.dom渲染完成// this.mergeCell(a,b,c,d)// a-table的节点 b-要合并的字段 c-行相同合并 d-列相同合并var ss = this.mergeCell(this.$refs.tableData, ['busi', 'busiDetail'], true, true)this.mergeMap = ss})}}}},methods:{// 根据屏幕的高度 实时更新table的高度resize() {this.$nextTick(() => {this.maxHeight = this.$refs['rightBar'].clientHeight - 140})},},//生命周期 - 挂载完成（可以访问DOM元素）mounted() {this.resize();window.addEventListener('resize', this.resize)},// 销毁监听事件destroyed() {window.removeEventListener('resize', this.resize)},
}

arraySpanMethod.js代码

// 合并单元格
export default {data() {return {mergeMap: []}},methods: {arraySpanMethod({ rowIndex, columnIndex }) {var map = this.mergeMaptry {var r = map[rowIndex][columnIndex]return r} catch (error) {return r}},mergeCell(table, colMap, isSpanRow = true, isSpanCol = true) {var list = table.data// table.tableData 中 每行的数据是一个对象,不能直接的反应显示的顺序// 即你不能知道第一列右则的列是那个.// 需要通过table.columns建立显示的顺序var columns = []for (const item of table.columns) {columns.push(item.prop)}// 结果应是一个二维数组// 先充填数据,使用其成为全显示的数组var result = []for (let row = 0, rowLen = list.length; row < rowLen; row++) {const ss = []for (let col = 0, colLen = columns.length; col < colLen; col++) {ss.push([1, 1])}result.push(ss)}// 合并行if (isSpanRow) {result = this.mergeRow(list, columns, colMap, result)}// 合并列if (isSpanCol) {result = this.mergeCol(list, columns, colMap, result)}return result},mergeRow(list, columns, colMap, result) {for (const item of colMap) {const p = {colKey: item,col: columns.indexOf(item),row: 0,val: ''}for (let row = 0, rowLen = list.length; row < rowLen; row++) {if (p.val === list[row][p.colKey]) {result[p.row][p.col][0] += 1result[row][p.col][0] = 0} else {p.row = rowp.val = list[row][p.colKey]}}}return result},mergeCol(list, columns, colMap, result) {for (let row = 0, rowLen = list.length; row < rowLen; row++) {const p = {col: 0,row: row,val: ''}for (let col = 0, colLen = columns.length; col < colLen; col++) {if (!colMap.includes(columns[col])) {p.col = colp.val = list[row][columns[col]]continue}if (p.val === list[row][columns[col]]) {result[p.row][p.col][1] += 1result[p.row][col][1] = 0} else {p.col = colp.val = list[row][columns[col]]}}}return result}}
}