一.需求
element的el-table动态获取数据合并行列，
但element自带的方法不能够随机分，只能是固定的去合并，这里我的需求是根据订单编号的id去合并，一个相同的id可能对应多个商品
只要求合并行：合并行.png
二.分析需求
动态-合并行
可能出现的情况：
一个同一订单号购买3个商品，
下一个同一订单号购买4个商品，
下一个同一订单号购买1个商品，
下一个同一订单号购买n个商品...
三.element表格渲染须知
- 1.
element的<el-table :data="tableData"></eltable>只能渲染一个数组中保存多条扁平化的对象类型数据,所以，如果接口返回的数据格式不符合element渲染格式需要先处理数据。
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
}]
- 2.合并表格需要了解
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>
</div>
</template>
methods: {
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.spanArr = []; // 定义在vue的data中
if (data === null) {
return
}
for (let i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0
} else { //第一次走else的时候：i已经是1了
// 判断当前元素与上一个元素是否相同
// console.log(data[i].orderSn, data[i - 1].orderSn,'data[i].orderSn')
if (data[i].orderSn === data[i - 1].orderSn) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
}
// console.log(this.spanArr,'spanArr') //[2,0,1,5,0,0,0,0]
},
4.在methods中写合并行的方法objectSpanMethod()
//表格合并行
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex > 3) { //需要合并的列：第0列和大于第三列以后的所有列
let _row = this.spanArr[rowIndex]; // 从处理完的数组里获取
console.log(_row,_row);
let _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
},
