vue3.0 element-plus 表格合並行

合並效果

 

 

 

代碼：

//el-table  上面加上  :span-method="cellMerge"

let tableData = ref(null)
watch(props, (newValue, oldValue) => {
    tableData.value = props.tableDatas
    getSpanArr(tableData.value)
})

function cellMerge({ row, column, rowIndex, columnIndex }) {
    // 合並第二列，第一列是序號
    if(columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 10 || columnIndex === 11 || columnIndex === 12 || columnIndex === 13 || columnIndex === 14 || columnIndex === 15 || columnIndex === 16 || columnIndex === 17 || columnIndex === 18 || columnIndex === 19 || columnIndex === 20){
        if(row.fwtjgdh && row.fwtjgdh!==" " && row.fwtjgdh!=="—"){
            const _row = spanArr.value[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
                rowspan: _row,
                colspan: _col,
            };
        }
    }
}


let spanArr = ref(null)
let pos 
function getSpanArr(data){
    spanArr.value = [];
    data.map((item, i) => {
        if (i === 0) {
            spanArr.value.push(1);
            pos = 0;
        }else{
            // 判斷當前元素與上一個元素是否相同
            if (item.fwtjgdh=== data[i - 1].fwtjgdh) {
                spanArr.value[pos] += 1;
                spanArr.value.push(0);
            } else {
                spanArr.value.push(1);
                pos = i;
            }
        }
    });
    // console.log(spanArr.value)
}