- template 中
<el-table
class="elTable"
:data="tableData"
stripe
border
style="width: 80%;"
height="900"
:span-method="objectSpanMethod"
v-if="tableData.length>0"
>
<el-table-column
prop="key"
label="内容1"
fixed
width="150">
</el-table-column>
<el-table-column
prop="key1"
fixed
label="内容2">
</el-table-column>
<el-table-column
prop="key2"
fixed
label="内容3">
</el-table-column>
<el-table-column
prop="key3"
fixed
label="内容4">
</el-table>
- 合并
2.1 第一列合并
①在 data 的 return 中增加
keyArr: [],
keyIndex: 0,
keyArr 是：第一列要合并数组 [2,0,1,3,0,0] 代表第一二行合并,第三行不变,第四五六行合并,0代表原本的那一行被合并,因此这个列被消除；
keyIndex 是：第一列要合并数组内容的序号
② methods 中添加方法
merage() {
//初始化合并行的数组
this.keyArr = [];
this.keyIndex = 0;
//要合并的数组的方法
for (var i = 0; i < this.tableData.length; i++) {
if (i === 0) {
//第一行必须存在
this.keyArr.push(1);
this.keyIndex = 0;
}
else {
// 判断当前元素与上一个元素是否相同 this.keyIndex是keyArr内容的序号
if (this.tableData[i].key === this.tableData[i - 1].key) {
this.keyArr[this.keyIndex] += 1;
this.keyArr.push(0);
} else {
this.keyArr.push(1);
this.keyIndex = i;
}
}
}
},
objectSpanMethod({row, column, rowIndex, columnIndex}) {
if (columnIndex === 0) {
//第一列的合并方法
const _row_1 = this.keyArr[rowIndex];
const _col_1 = _row_1 > 0 ? 1 : 0; //如果被合并了_row=0则它这个列需要取消
return {
rowspan: _row_1,
colspan: _col_1
}
}
},
2.2 第一、二列合并
①在 data 的 return 中增加
this.keyArr = [];
this.keyIndex = 0;
this.key1Arr = [];
this.key1Index = 0;
② methods 中添加方法
merage() {
//初始化合并行的数组
this.keyArr = [];
this.keyIndex = 0;
this.key1Arr = [];
this.key1Index = 0;
//要合并的数组的方法
for (var i = 0; i < this.tableData.length; i++) {
if (i === 0) {
//第一行必须存在
this.keyArr.push(1);
this.keyIndex = 0;
this.key1Arr.push(1);
this.key1Index = 0;
}
else {
// 判断当前元素与上一个元素是否相同 this.keyIndex是keyArr内容的序号
//第一列
if (this.tableData[i].key === this.tableData[i - 1].key) {
this.keyArr[this.keyIndex] += 1;
this.keyArr.push(0);
} else {
this.keyArr.push(1);
this.keyIndex = i;
}
//第二列
if (this.tableData[i].key1 === this.tableData[i - 1].key1 && this.tableData[i].key === this.tableData[i - 1].key) {
this.key1Arr[this.key1Index] += 1;
this.key1Arr.push(0);
} else {
this.key1Arr.push(1);
this.key1Index = i;
}
}
}
},
objectSpanMethod({row, column, rowIndex, columnIndex}) {
if (columnIndex === 0) {
//第一列的合并方法
const _row_1 = this.keyArr[rowIndex];
const _col_1 = _row_1 > 0 ? 1 : 0; //如果被合并了_row=0则它这个列需要取消
return {
rowspan: _row_1,
colspan: _col_1
}
} else if (columnIndex === 1) {
//第二列的合并方法
const _row_2 = this.key1Arr[rowIndex];
const _col_2 = _row_2 > 0 ? 1 : 0;
return {
rowspan: _row_2,
colspan: _col_2
}
}
},
2.3 第一、二、三列合并
①在 data 的 return 中增加
keyArr: [],
keyIndex: 0,
key1Arr: [],
key1Index: 0,
key2Arr: [],
key2Index: 0,
② methods 中添加方法
merage() {
//初始化合并行的数组
this.keyArr = [];
this.keyIndex = 0;
this.key1Arr = [];
this.key1Index = 0;
this.key2Arr = [];
this.key2Index = 0;
//要合并的数组的方法
for (var i = 0; i < this.tableData.length; i++) {
if (i === 0) {
//第一行必须存在
this.keyArr.push(1);
this.keyIndex = 0;
this.key1Arr.push(1);
this.key1Index = 0;
this.key2Arr.push(1);
this.key2Index = 0;
}
else {
// 判断当前元素与上一个元素是否相同 this.keyIndex是keyArr内容的序号
//第一列
if (this.tableData[i].key === this.tableData[i - 1].key) {
this.keyArr[this.keyIndex] += 1;
this.keyArr.push(0);
} else {
this.keyArr.push(1);
this.keyIndex = i;
}
//第二列
if (this.tableData[i].key1 === this.tableData[i - 1].key1 && this.tableData[i].key === this.tableData[i - 1].key) {
this.key1Arr[this.key1Index] += 1;
this.key1Arr.push(0);
} else {
this.key1Arr.push(1);
this.key1Index = i;
}
//第三列
if (this.tableData[i].key2 === this.tableData[i - 1].key2 && this.tableData[i].key1 === this.tableData[i - 1].key1 && this.tableData[i].key === this.tableData[i - 1].key) {
this.key2Arr[this.key2Index] += 1;
this.key2Arr.push(0);
} else {
this.key2Arr.push(1);
this.key2Index = i;
}
}
}
},
objectSpanMethod({row, column, rowIndex, columnIndex}) {
if (columnIndex === 0) {
//第一列的合并方法
const _row_1 = this.keyArr[rowIndex];
const _col_1 = _row_1 > 0 ? 1 : 0; //如果被合并了_row=0则它这个列需要取消
return {
rowspan: _row_1,
colspan: _col_1
}
} else if (columnIndex === 1) {
//第二列的合并方法
const _row_2 = this.key1Arr[rowIndex];
const _col_2 = _row_2 > 0 ? 1 : 0;
return {
rowspan: _row_2,
colspan: _col_2
}
} else if (columnIndex === 2) {
//第三列的合并方法
const _row_3 = this.key2Arr[rowIndex];
const _col_3 = _row_3 > 0 ? 1 : 0;
return {
rowspan: _row_3,
colspan: _col_3
}
}
},
。
。
。
。
第几列之后 ，以此类推
- 在methods 中获取的数据
this.tableData = [
{key:'1',key1:'1',key2:'2'},
{key:'1',key1:'2',key2:'2'},
{key:'2',key1:'1',key2:'2'},
{key:'2',key1:'1',key2:'2'},
{key:'3',key1:'1',key2:'2'},
{key:'4',key1:'1',key2:'2'},
{key:'4',key1:'3',key2:'2'},
{key:'4',key1:'3',key2:'2'},
{key:'5',key1:'6',key2:'2'},
]
在 tableData 数据确定之后 调用 this.merage(); 方法修改需要合并的数目