实现简单的合并行:
某列的字段相同需要合并时:
表格:加上 :span-method=" "方法
<el-table stripe
v-loading='loading'
:data='tableData.data'
border
:span-method="objectSpanMethod"
size='small'
:key="Math.random()"
ref='selection'
style='width: 100%'
>
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
let me = this;
if (me.idArr.length > 0) {
//因为第0列是数字或者选择框,所以columnIndex为1(columnIndex是需要合并第几列)
if (columnIndex === 1) {
const _row_1 = this.idArr[rowIndex];
const _col_1 = _row_1 > 0 ? 1 : 0;
return {
rowspan: _row_1,
colspan: _col_1
}
}
}
},
调用后台接口:
queryData(){
this.$axios.post('', {}).then(function (data) {
me.tableData.data = data;
me.merage();
me.loading=false;
})
}
merage(){
let me = this;
me.idPos=0;
me.idArr = [];
if(me.tableData.data.length>0){
for (let i = 0; i < this.tableData.data.length; i++) {
if (i === 0) {
me.idArr.push(1);
me.idPos = 0;
}else{
//此处是合并的相同的机构名称orgname
if (this.tableData.data[i].orgname === this.tableData.data[i - 1].orgname) {
this.idArr[this.idPos] += 1;
this.idArr.push(0);
}
else {
this.idArr.push(1);
this.idPos = i;
}
}
}
}else{
me.idArr = [];
}
},
结尾:在调用完获取数据接口后就要执行merag()方法。