el-table合并部分内容成功，部分不成功的问题探讨
问题详情：需要实现的表格效果如下图所示，前四列内容固定不变，采用新的表格合并方法。
[图片]
已有渲染代码如下：
zuojiankuohaophpcnel-table :data="waterData" border :span-method="handleSpanM"youjiankuohaophpcn
zuojiankuohaophpcnel-table-column width="65"youjiankuohaophpcnzuojiankuohaophpcntemplate slot-scope="scope"youjiankuohaophpcn{{scope.row.name }}zuojiankuohaophpcn/templateyoujiankuohaophpcnzuojiankuohaophpcn/el-table-columnyoujiankuohaophpcn
zuojiankuohaophpcnel-table-column width="70" label="系数"youjiankuohaophpcn
zuojiankuohaophpcntemplate slot-scope="scope"youjiankuohaophpcnzuojiankuohaophpcnel-input size="mini" v-model="scope.row.factor"youjiankuohaophpcnzuojiankuohaophpcn/el-inputyoujiankuohaophpcnzuojiankuohaophpcn/templateyoujiankuohaophpcn
zuojiankuohaophpcn/el-table-columnyoujiankuohaophpcn
zuojiankuohaophpcnel-table-column width="120" label="等级分数"youjiankuohaophpcn
zuojiankuohaophpcntemplate slot-scope="scope"youjiankuohaophpcnzuojiankuohaophpcnel-input size="mini" v-model="scope.row.grade"youjiankuohaophpcnzuojiankuohaophpcn/el-inputyoujiankuohaophpcnzuojiankuohaophpcn/templateyoujiankuohaophpcn
zuojiankuohaophpcn/el-table-columnyoujiankuohaophpcn
zuojiankuohaophpcnel-table-column width="180" label="符号选择"youjiankuohaophpcn
zuojiankuohaophpcntemplate slot-scope="scope"youjiankuohaophpcnzuojiankuohaophpcndiv class="symbol"youjiankuohaophpcnzuojiankuohaophpcnspan style="display: none;"youjiankuohaophpcn{{ scope.row.symbol }}zuojiankuohaophpcn/spanyoujiankuohaophpcnzuojiankuohaophpcnspan class="symbol_range"youjiankuohaophpcnzuojiankuohaophpcn/spanyoujiankuohaophpcnzuojiankuohaophpcn/divyoujiankuohaophpcnzuojiankuohaophpcn/templateyoujiankuohaophpcn
zuojiankuohaophpcn/el-table-columnyoujiankuohaophpcn
zuojiankuohaophpcnel-table-column v-for="(column,index) in 6" :key="`column-${index}`" width="120"youjiankuohaophpcn
zuojiankuohaophpcntemplate slot="header"youjiankuohaophpcnzuojiankuohaophpcndivyoujiankuohaophpcnzuojiankuohaophpcnel-input size="small" v-model="waterForm[`water${index + 1}_label`]"youjiankuohaophpcnzuojiankuohaophpcn/el-inputyoujiankuohaophpcn zuojiankuohaophpcn/divyoujiankuohaophpcn zuojiankuohaophpcn/templateyoujiankuohaophpcn
zuojiankuohaophpcntemplate slot-scope="scope"youjiankuohaophpcnzuojiankuohaophpcndivyoujiankuohaophpcnzuojiankuohaophpcnel-input size="small" v-model="waterForm[`water${index + 1}_factor`]"youjiankuohaophpcnzuojiankuohaophpcn/el-inputyoujiankuohaophpcnzuojiankuohaophpcn/divyoujiankuohaophpcn zuojiankuohaophpcn/templateyoujiankuohaophpcnzuojiankuohaophpcn/el-table-columnyoujiankuohaophpcn
zuojiankuohaophpcn/el-tableyoujiankuohaophpcn问题分析
系统能实现预期效果，但第4列一直无法合并。
解决方案
新的表格合并方法如下：
merge(tableData) {
// 要合并的数组的方法
this.companyArr = [];
this.companyPos = 0;
this.simpleArr = [];
this.simplePos = 0;
this.symbolArr = [];
this.symbolPos = 0;
for (var i = 0; i zuojiankuohaophpcn tableData.length; i++) {
if (i === 0) {
// 第一行必须存在
this.companyArr.push(1);
this.companyPos = 0;
this.simpleArr.push(1);
this.simplePos = 0;
this.symbolArr.push(1);
this.symbolPos = 0;
} else {
// 第一列
if (tableData[i].name === tableData[i - 1].name) {
this.companyArr[this.companyPos] += 1;
this.companyArr.push(0);
} else {
this.companyArr.push(1);
this.companyPos = i;
}
// 第二列
if (
tableData[i].name === tableData[i - 1].name &&
tableData[i].factor === tableData[i - 1].factor
) {
this.simpleArr[this.simplePos] += 1;
this.simpleArr.push(0);
} else {
this.simpleArr.push(1);
this.simplePos = i;
}
// 第四列
if (
tableData[i].name === tableData[i - 1].name &&
tableData[i].factor === tableData[i - 1].factor &&
tableData[i].symbol === tableData[i - 1].symbol
) {
this.symbolArr[this.symbolPos] += 1;
this.symbolArr.push(0);
} else {
this.symbolArr.push(1);
this.symbolPos = i;
}
}
}
},
// 合并行
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
// 合并第一列
const _row_1 = this.companyArr[rowIndex];
const _col_1 = _row_1 youjiankuohaophpcn 0 ? 1 : 0; // 如果被合并了_row=0则它这个列需要取消
return {
rowspan: _row_1,
colspan: _col_1,
};
} else if (columnIndex === 1) {
// 合并第二列
const _row_2 = this.simpleArr[rowIndex];
const _col_2 = _row_2 youjiankuohaophpcn 0 ? 1 : 0;
return {
rowspan: _row_2,
colspan: _col_2,
};
} else if (columnIndex === 3) {
// 合并第四列
const _row_3 = this.symbolArr[rowIndex];
const _col_3 = _row_3 youjiankuohaophpcn 0 ? 1 : 0;
return {
rowspan: _row_3,
colspan: _col_3,
};
}
}后几列表头不可编辑的修复
// data
waterForm: {
water1_label: "前10分钟",
water2_label: "前20分钟",
water3_label: "前30分钟",
water4_label: "前40分钟",
water5_label: "前50分钟",
water6_label: "前60分钟",
}, 
