目录
一、需求分析
二、分析逻辑
1.官网介绍 ：
三、合并
注意：以上进行处理的时候需要处理所有的行的数据不合并的则需要进行补0操作。
一、需求分析
element的el-table动态获取数据合并行列，
但element自带的方法不能够随机分，只能是固定的去合并，这里我的需求是根据类型去合并，一个相同的类型的首标题需要进行合并
二、分析逻辑
数据 :
{ examineProjectName:'苹果',examineObject:'苹果',score:0.00,rowspan:2},
{ examineProjectName:'苹果',examineObject:'苹果',score:0.00,rowspan:2},
{ examineProjectName:'橘子,examineObject:'橘子',score:0.00,rowspan:2},
{ examineProjectName:'橘子',examineObject:'橘子',score:0.00,rowspan:2},
{ examineProjectName:'香蕉',examineObject:'香蕉',score:0.00,rowspan:1},
按照 ：examineProjectName 进行合并的
1.官网介绍 ：
合并表格需要了解element合并表格的属性：
通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象.
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%; margin-top: 20px">
<el-table-column
prop="id"
label="ID"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名">
</el-table-column>
<el-table-column
prop="amount1"
label="数值 1（元）">
</el-table-column>
<el-table-column
prop="amount2"
label="数值 2（元）">
</el-table-column>
<el-table-column
prop="amount3"
label="数值 3（元）">
</el-table-column>
</el-table>
data() {
return {
tableData: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
};
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
//row:对象形式，保存了当前行的数据
//column：对象形式，保存了当前列的参数
//rowIndex:当前行的行号
//column：当前列的列号
if (columnIndex === 0) {
if (rowIndex % 2 === 0) { //%：表示从多少(行)到多少(行)进行合并
return {
rowspan: 2, //rowspan:单元格可横跨的行数
colspan: 1 //colspan:单元格可横跨的列数
};
} else {
return {
rowspan: 0, //等于0表示不合并
colspan: 0
};
}
}
}
};三、合并
1.这里忽略数据处理，假设数据已经处理完成，并能正确的在表格中渲染出来。
2.给 <el-table>添加 处理行的方法:span-method="objectSpanMethod" 3.在methods中写对表格数据进行处理，找出需要合并的单元格的方法getSpanArr(),该方法需要加在页面渲染之前获取列表数据的方法中并传入列表需要渲染的数据作为参数
// 对表格数据进行处理，找出需要合并的单元格
getSpanArr(data) {
this.mergeRules = []; // 定义在vue的data中
if (data === null) {
return
}
for (let i = 0; i < data.length; i++) {
if (i === 0) {
this.mergeRules.push(1);
this.pos = 0
} else { //第一次走else的时候：i已经是1了
// 判断当前元素与上一个元素是否相同
// console.log(data[i].orderSn, data[i - 1].orderSn,'data[i].orderSn')
if (data[i].examineProjectName === data[i - 1].examineProjectName) {
this.mergeRules[this.pos] += 1;
this.mergeRules.push(0);
} else {
this.mergeRules.push(1);
this.pos = i;
}
}
}
// 这里需要计算所有行的
console.log(this.mergeRules,'spanArr') //[2,0,1,5,0,0,0,0]
},4.methods中写合并行的方法objectSpanMethod()
/** 合并表格方法 里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性
*
* 返回值：当前要合并
*/
//表格合并行
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex > 3) { //需要合并的列：第0列和大于第三列以后的所有列
let _row = this.mergeRules[rowIndex]; // 从处理完的数组里获取
console.log(_row,_row);
let _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
},注意：以上进行处理的时候需要处理所有的行的数据不合并的则需要进行补0操作。
