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.mergeMap
            try {
                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] += 1
                        result[row][p.col][0] = 0
                    } else {
                        p.row = row
                        p.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 = col
                        p.val = list[row][columns[col]]
                        continue
                    }

                    if (p.val === list[row][columns[col]]) {
                        result[p.row][p.col][1] += 1
                        result[p.row][col][1] = 0
                    } else {
                        p.col = col
                        p.val = list[row][columns[col]]
                    }
                }
            }
            return result
        }
    }
}