<el-table
v-loading="tableLoading"
:data="tableData"
size="mini"
style="width: 100%"
:span-method="objectSpanMethod">
<el-table-column
prop="scenceType"
label="双录流程">
</el-table-column>
</el-table>
data() {
return {
spanArr: [],
pos: 0
};
},
// 获取详情
getCollectInfoDetailApi(collectId) {
getCollectInfoDetail({ collectId }).then(data => {
let res = data.data;
if (res.data.length > 0) {
this.tableData = res.data;
let scenceTypeList = res.data.map(e => {
return e.scenceType;
});
this.getSpanArr(scenceTypeList);
}
});
},
// data 为需要合并的表格参数
getSpanArr(data) {
console.log(data);
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0;
} else {
// 判断当前元素与上一个元素是否相同,因合并第一个所以[0]
if (data[i] === data[i - 1]) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
}
console.log(this.spanArr);
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
},
网友评论