因项目需要临时更新一些数据 直接插入数据后发现数据渲染有问题
表格
<el-table style="width: 100%" :data="progressTableDataCol" class="progressTable" :highlight-current-row="false"}"
ref="refreshTable" :span-method="objectSpanMethod1" :header-cell-style="mergeHeader" >
<el-table-column label="施工项" fixed align="center" style="border-right:none;" prop="label">
el-table-column>
<el-table-column label="" fixed align="center" prop="parentLabel">
el-table-column>
<el-table-column
v-for="(item, i) in progressTableDataRow"
:key="i"
:label="item.label"
align="center" >
<el-table-column
v-for="(items, index) in item.children"
:key="index + items.label"
:label="items.label"
align="center" >
<template slot-scope="scope" v-if="scope.row[items.value]">
<div class="tableBox">
<span>{{ scope.row[items.value] }}span><br />
div>
template>
el-table-column>
el-table-column>
el-table>
需要渲染的数据
this.progressTableDataCol =
[{
label: "单桩",
parentLabel: "制作完成",
},
{
label: "单桩",
parentLabel:"沉桩完成",
"22": "2022.5.9",
"7": "2022.5.7",
},
{
label: "塔筒",
parentLabel: "制作完成",
},
{
label: "塔筒",
parentLabel: "吊装完成",
},
]
}
表头合并的方法
objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex === 0) {
return {
rowspan: 2,
colspan: 1,
};
}
if (rowIndex === 2) {
return {
rowspan: 2,
colspan: 1,
};
}
}
},
渲染出来的效果
当时就是感到很莫名其妙发现会无缘无故多出一列 导致数据往后偏移一位 查看代码后发现一个很容易遗漏的问题 就是在合并列或者行之后 应对被合并的行或列也进行处理
表头合并的方法
objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex === 0) {
return {
rowspan: 2,
colspan: 1,
};
}
// 只需要把被合并的单元格设置为0就行
if (rowIndex === 1) {
return {
rowspan: 0,
colspan: 0,
};
}
if (rowIndex === 2) {
return {
rowspan: 2,
colspan: 1,
};
}
// 只需要把被合并的单元格设置为0就行
if (rowIndex === 3) {
return {
rowspan: 0,
colspan: 0,
};
}
}
},
最近有看到一个更加详细的博客 完全实现各种方向的合并 有兴趣可以看一下大佬原文Element-UI el-table 表格动态合并行和列