el-table表格合并高亮问题之去除表格浮动

85 阅读1分钟

去除表格浮动

 <el-table :data="tableData" ref="table" style="width: 100% ;background-color: rgba(19, 27, 42, 0.65);height: 100%;" :max-height="740" :span-method="arraySpanMethod" fixed:row-style="{ height: '36px', backgroundColor: 'transparent', color: 'rgb(255, 255, 255)', }"
 :header-cell-style="{ backgroundColor: 'rgba(35,46,58)', color: 'rgb(255, 255, 255 )', fontSize: '16px' }">
el-table-column prop="gfName" label="所属规范" align="center" :min-width="150" />
<el-table-column prop="wildName" label="表格" align="center" :min-width="150" />
<el-table-column prop="tableName" label="表格分类" align="center":min-width="150" />
<el-table-column prop="questionnaire" label="调查表" align="center" :min-width="200">
</el-table-column>
</el-table>

`

  arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            const mergeColumns = [
                { prop: 'gfName', index: 0 },
                { prop: 'wildName', index: 1 },
                { prop: 'tableName', index: 2 }
            ];
 
            // 遍历需要合并的列
            for (let i = 0; i < mergeColumns.length; i++) {
                const { prop, index } = mergeColumns[i];
 
                // 如果当前列是需要合并的列
                if (columnIndex === index) {
                    if (rowIndex > 0 && row[prop] === this.tableData[rowIndex - 1][prop]) {
                        // 如果当前行的数据与上一行的数据相同,则合并当前单元格
                        return [0, 0]; // 合并当前单元格
                    } else {
                        let span = 1;
                        for (let j = rowIndex + 1; j < this.tableData.length; j++) {
                            if (row[prop] === this.tableData[j][prop]) {
                                span++;
                            } else {
                                break;
                            }
                        }
                        return [span, 1]; // 返回合并的行数和列数
                    }
                }
            }
            // 如果不是需要合并的列,则不合并
            return [1, 1];
        },
 
.el-table__body-wrapper tbody .el-table__row:hover>.el-table__cell {
        background-color: transparent !important;
        color: rgb(255, 255, 255) !important;
    }