el-table中合并表格后横向变高样式无效

html中要设置高度，style中要设置高度

合并单元格逻辑优化

1. ‌正确返回合并参数‌
   在 objectSpanMethod 方法中，非首行合并单元格必须返回 [0, 0]，否则残留空白单元格会导致行高异常：

   javascriptCopy Code

   const objectSpanMethod = ({ row, column, rowIndex }) => { if (columnIndex === 0) { // 合并首列 if (rowIndex % 2 === 0) { return [2, 1]; // 合并两行 } else { return [0, 0]; // 关键：隐藏被合并行:ml-citation{ref="1,2" data="citationList"} } } }

2. ‌动态计算合并范围‌
   使用计算属性生成合并规则，避免硬编码导致分页数据异常：

   javascriptCopy Code

   const mergeMap = computed(() => { const map = new Map(); tableData.value.forEach((item, index) => { if (!map.has(item.groupId)) { map.set(item.groupId, { start: index, span: 1 }); } else { map.get(item.groupId).span++; } }); return map; }); // 适用于动态数据分组:ml-citation{ref="3,7" data="citationList"}

---

二、行高样式强制生效

1. ‌绑定行内样式‌
   使用动态绑定语法设置行高，注意数值需拼接 'px' 单位：

   htmlCopy Code

   <el-table :row-style="{ height: '45px' }" :cell-style="{ padding: '5px 0' }" ></el-table>

   ‌注意‌：直接写 height:45 或 height:'45px' 可能失效，需确保值为字符串类型58。

2. ‌CSS 深度覆盖‌
   通过深度选择器修改内置单元格样式：

   cssCopy Code

   :deep(.el-table td) { padding: 8px 0 !important; line-height: 1.4 !important; } :deep(.el-table .cell) { max-height: 40px !important; /* 限制内容高度 */ overflow-y: auto !important; }:ml-citation{ref="4,6" data="citationList"}