Element+vue3.0 tabel合并单元格 span-method
:span-method="objectSpanMethod"详解：
在 objectSpanMethod 方法中，rowspan 和 colspan 的值通常用来定义单元格的行跨度和列跨度。
一般来说，rowspan 和 colspan 的值应该是大于等于1的整数，表示单元格的跨度。如果设置为0，则表示该单元格不跨行或列。然而，通常在 Vue 的 Element UI 表格中，rowspan 和 colspan 的值不应该为0，因为这可能会导致布局问题或显示异常。如果你尝试将 rowspan 或 colspan 设置为0，不生成单元格。
- rowspan: 定义单元格应横跨多少行。
- colspan: 定义单元格应横跨多少列。
- row: 当前行的数据对象。
- column: 当前列的配置对象。
- rowIndex: 当前行的索引（从0开始）。
- columnIndex: 当前列的索引（从0开始）。
HTML
<el-table :data="tableData" :span-method="objectSpanMethod">
<el-table-column prop="name" label="名称" width="180"></el-table-column>
<el-table-column prop="part" label="部件" width="180"></el-table-column>
<el-table-column prop="result" label="结果" width="180"></el-table-column>
<el-table-column prop="img" label="图片" width="180"></el-table-column>
<el-table-column prop="remark" label="备注" width="180"></el-table-column>
<!-- 其他列定义 -->
</el-table>
数据：
tableData: [
{
name: "整车外观",
part: "车架编号照片1",
result: true,
img: "img",
remark: "remark",
},
{
name: "整车外观",
part: "车架编号照片2",
result: true,
img: "img",
remark: "remark",
},
{
name: "整车外观",
part: "车架编号照片3",
result: true,
img: "img",
remark: "remark",
},
{
name: "动力传动",
part: "车架编号照片1",
result: true,
img: "img",
remark: "remark",
},
{
name: "动力传动",
part: "车架编号照片2",
result: true,
img: "img",
remark: "remark",
},
{
name: "动力传动",
part: "车架编号照片3",
result: true,
img: "img",
remark: "remark",
},
{
name: "车轮和转向检查",
part: "车架编号照片1",
result: true,
img: "img",
remark: "remark",
},
{
name: "车轮和转向检查",
part: "车架编号照片2",
result: true,
img: "img",
remark: "remark",
},
{
name: "车轮和转向检查",
part: "车架编号照片3",
result: true,
img: "img",
remark: "remark",
},
],
方法：
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
if (columnIndex === 0 || columnIndex === 2) {
// 当前列为0的时候不进行操作单元格
const name = row[column.property];
const preRow = tableData.value[rowIndex - 1];
const preValue = preRow ? preRow[column.property] : null;
// 当前行的数据对象的name 是否和 上一行列的 name 是否相等 相等就不合并单元格
if (name === preValue) {
return { rowspan: 0, colspan: 0 }; // 不生成单元格
} else {
let rowspan = 1;
for (let i = rowIndex + 1; i < tableData.value.length; i++) {
const nextRow = tableData.value[i];
const nextValue = nextRow[column.property];
if (nextValue === name) {
rowspan++;
} else {
break;
}
}
return { rowspan, colspan: 1 };
}
}
};
下面是该代码的逻辑解释：
这段代码定义了一个名为 objectSpanMethod 的方法，该方法用于控制表格中单元格的合并。这个方法接收一个对象作为参数，该对象包含当前行的数据对象 (row)、当前列的配置对象 (column)、当前行的索引 (rowIndex) 和当前列的索引 (columnIndex)。
-
条件判断：首先，它检查当前列的索引 (columnIndex) 是否为0。如果是，表示正在处理表格的第一列。
-
获取数据和判断：
-
获取当前行的数据对象中的属性值，通过 row[column.property] 获取。
-
获取上一行的数据对象，通过 tableData.value[rowIndex - 1] 获取。然后，获取上一行相应属性的值。
-
通过比较当前行的属性值和上一行的属性值，判断它们是否相等。
返回值：
if
- 如果当前行的属性值与上一行的属性值相等，则返回 { rowspan: 0, colspan: 0 }，意味着不生成单元格。
- 如果不相等，则进入另一个逻辑：
else
- 初始化 rowspan 为1，表示当前单元格应该只占用一行。
- 通过循环遍历下一行直到表格的末尾，检查下一行的相应属性值是否与当前行的属性值相等。
- 如果相等，则 rowspan 值加1。
- 如果不相等或者已经遍历到表格的末尾，则退出循环。
- 最后，返回 { rowspan, colspan: 1 }，表示单元格应跨越 rowspan 行和1列。
总的来说，这段代码是用于在Vue的Element UI表格中根据特定的逻辑（比较当前行和上一行的属性值）来控制单元格的合并。
