el-table合并多行相同列

const spanMethod = ({ row, column, rowIndex, columnIndex }) => {
    //2合并第三列每一行相同的数据
    if (columnIndex === 2) {
        // 获取当前单元格的值  stationLevel是那一列的字段
        const currentValue = row['stationLevel'];
        // 获取上一行相同列的值。 tableDate:table表格的数据
        const preRow = tableDate.value[rowIndex - 1];
        const preValue = preRow ? preRow['stationLevel'] : null;
        // 如果当前值和上一行的值相同,则将当前单元格隐藏
        if (currentValue === preValue) {
            return { rowspan: 0, colspan: 0 };
        } else {
            // 否则计算当前单元格应该跨越多少行
            let rowspan = 1;
            for (let i = rowIndex + 1; i < tableDate.value.length; i++) {
                const nextRow = tableDate.value[i];
                const nextValue = nextRow['stationLevel'];
                if (nextValue === currentValue) {
                    rowspan++;
                } else {
                    break;
                }
            }
            return { rowspan, colspan: 1 };
        }
    }
};

效果:

el-table合并多行相同列_第1张图片

你可能感兴趣的:(vue.js,javascript,ecmascript)