<el-table
:data="tableInfo.tableData"
stripe
height="calc(100% - 32px)"
fit
:span-method="objectSpanMethod"
:cell-style="cellstyle"
@sort-change="sortchange"
>
<template v-for="(col,index) in tableInfo.columns">
<el-table-column
></el-table-column>
:prop="col.prop"
:key="index"
align="center"
:label="col.label"
:width="col.width||100"
</template>
</el-table>
private rowSpanArr: Array<Array<any>> = new Array<Array<any>>();
private dataArr: Array<Array<any>> = new Array<Array<any>>();
function getdate(){
//后台获取数据后为data
// 获取映射分类下的数组
that.dataArr = that.toArray(data);
that.getRowSpan();
}
that.tableInfo.columns = [
{ label: "姓名", prop: "Name" },
{ label: "性别", prop: "Sex", 100 },
{ label: "年龄", prop: "Age", 100 },
];
toArray(arr: Array<any>) { let that = this; var arrs = new Array<Array<any>>(); arr.forEach(function (v, i, arr) { var keys = Object.keys(v); arrs[i] = new Array(); that.tableInfo.columns.forEach(function (v1: any, i1: any, arr1: any) { arrs[i].push(arr[i][v1.prop]); //用于把展示的数据给转换成datatable类型, }); }); return arrs; } // 列合并数组数据(记录每个单元格占用多少行,rowposition为当前计算行) getRowSpan() { let that = this; that.rowSpanArr = new Array<Array<number>>(); let columns = that.dataArr[0].length || 0; //用于记录每列的计算行 let rowposition = Array(columns).fill(0); that.dataArr.forEach((item: any, row: number) => { //初始化每行每列 that.rowSpanArr[row] = Array(columns).fill(1); if (row > 0) { //循环列 let over = false; for (let column = 0; column < that.dataArr[row].length; column++) { if (that.dataArr[row][column] == that.dataArr[row - 1][column]) { if (over) { rowposition[column] = row; } else { that.rowSpanArr[rowposition[column]][column] += 1; that.rowSpanArr[row][column] = 0; } } else { rowposition[column] = row; over = true; } } } }); } objectSpanMethod({ row, column, rowIndex, columnIndex }: any) { // 只合并区域位置 let that = this; if (columnIndex === 0 || columnIndex === 1) { const _row = that.rowSpanArr[rowIndex][columnIndex]; return { rowspan: _row, //行 colspan: 1, //列 }; } }