ruoyi-vue-pro 表格跨行合并

当对表格跨行合并时，可以使用以下方式。

el-table 使用 span-method。

<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" :span-method="objectSpanMethod" >

JS 中增加：

留意以下项的配置：SpanMethodProps 接口、 columnIndex 用于指定合并的列序号， currentValue 为判断合并使用的字段。

interface SpanMethodProps {
    row: ProjectRepVO
    column: TableColumnCtx<ProjectRepVO>
    rowIndex: number
    columnIndex: number
}
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {

    // 对第几列合并（0表示第1列）
    if (columnIndex === 0) {
        // 获取当前单元格的值
        const currentValue = row['localContrCode']
        // 获取上一行相同列的值
        const preRow = list.value[rowIndex - 1]
        const preValue = preRow ? preRow[column.property] : null
        // 如果当前值和上一行的值相同，则将当前单元格隐藏
        if (currentValue === preValue) {
            return { rowspan: 0, colspan: 0 }
        } else {
            // 否则计算当前单元格应该跨越多少行
            let rowspan = 1
            for (let i = rowIndex + 1; i < list.value.length; i++) {
                const nextRow = list.value[i]
                const nextValue = nextRow[column.property]
                if (nextValue === currentValue) {
                    rowspan++
                } else {
                    break
                }
            }
            return { rowspan, colspan: 1 }
        }
    }

}

相关文章：