后端返回一個(gè) list ，先根據(jù) list 處理為表格，同時(shí)想要實(shí)現(xiàn) word 里面那種任意合并單元格的樣式，查了好多地方。效果如下：

效果

即根據(jù)數(shù)據(jù)內(nèi)容進(jìn)行動(dòng)態(tài)合并，思路是先將 list 數(shù)據(jù)處理為 對(duì)象 形式：

var recv = [
['1','1','3','4','5'],
['6','7','8','9','10'],
['11','12','13','9','15'],
['11','17','18','19','19']]

var tableKey = []

var tableData = []

var obj = new Object()

recv[0].forEach((item,index,array)=>{
    tableKey.push({value:'col'+index, name:item})
})

recv.forEach((item,index,array)=>{
    item.forEach((iitem,iindex,iarray)=>{
        obj['col'+iindex]=iitem
    })
    tableData.push(obj)
    // 清空對(duì)象
    obj = new Object()
})

這樣表頭數(shù)據(jù)和表格數(shù)據(jù)就會(huì)裝載為：

tableData = [
{"value":"col0","name":"1"},
{"value":"col1","name":"1"},
{"value":"col2","name":"3"},
{"value":"col3","name":"4"},
{"value":"col4","name":"5"}]

tableData = [
{"col0":"1","col1":"1","col2":"3","col3":"4","col4":"5"},
{"col0":"6","col1":"7","col2":"8","col3":"9","col4":"10"},
{"col0":"11","col1":"12","col2":"13","col3":"9","col4":"15"},
{"col0":"11","col1":"17","col2":"18","col3":"19","col4":"19"}
]

最后在組件中進(jìn)行處理：

export default{
    name: 'table',
    data(){
        return{
            // 行合并數(shù)據(jù)和列合并數(shù)據(jù)
            spanRowArrs:[],
            spanColArrs:[],
            tableKey,
            tableData
        }
    },
    created(){
        // 掛載函數(shù)
        this.getSpanArr(this.tableData)
        this.getRowSpanArr(this.tableData)
    },
    methods:{
        // 1 處理縱向數(shù)據(jù)
        getSpanArr(data) {
            var spanArr=[];
            for (var prop in data[0]){
                for (var i = 0; i < data.length; i++) {
                    if (i === 0) {
                        spanArr.push(1);
                        this.pos = 0;
                    } else {
                        if (data[i][prop] === data[i - 1][prop]) {
                            spanArr[this.pos] += 1;
                            spanArr.push(0);
                        } else {
                            spanArr.push(1);
                            this.pos = i;
                        }
                    }
                }
                this.spanRowArrs.push(spanArr)
                spanArr = []
            }
        },
        
        // 2. 處理橫向數(shù)據(jù)
        getRowSpanArr(data){
            var spanArr=[];
            var keyArr = Object.keys(data[0]);

            for(var i = 0 ; i < data.length; i++){
                for(var j = 0; j< keyArr.length; j++){
                    if (j === 0){
                        spanArr.push(1);
                        this.pos=0;
                    }else{
                        if(data[i][keyArr[j]] === data[i][keyArr[j-1]]){
                            spanArr[this.pos] += 1;
                            spanArr.push(0);
                        } else {
                            spanArr.push(1);
                            this.pos = j;
                        }
                    }
                }
                this.spanColArrs.push(spanArr)
                spanArr = []
            }
        },

        // 3 返回合并數(shù)
        spanMethod({ row, column, rowIndex, columnIndex }){
            if (columnIndex >= 0) {
                const _row = this.spanRowArrs[columnIndex][rowIndex];        
                const _col = this.spanColArrs[rowIndex][columnIndex];
                //const _col = _row > 0 ? 1 : 0;        
                return {            
                    rowspan: _row,
                    colspan: _col        
                }
            }
        }
    }
}