效果
请求数据
<el-table
ref="dragTable"
border
row-key="Id"
max-height="510"
stripe
:data="
ConsolidationList.slice(
(this.page4.pageNum - 1) * this.page4.pageSize,
(this.page4.pageNum - 1) * this.page4.pageSize +
this.page4.pageSize
)
"
:header-cell-style="$style.rowClass"
:span-method="cellMerge"
>
<el-table-column label="序号" width="55" prop="Nosort" align="center"/>
<el-table-column
prop="labelCode"
label="标签码"
align="center"
/>
<el-table-column
prop="goodsName"
label="商品名称"
align="center"
show-overflow-tooltip
/>
<el-table-column
prop="num"
label="分配数量"
align="center"
/>
<el-table-column
prop="specKey"
label="包装单位"
align="center"
/>
<el-table-column
prop="pickUnitType"
label="整零标识"
align="center"
>
<template slot-scope="scope">
<span>{{
PICK_UNIT_TYPE[scope.row.pickUnitType]
}}</span>
</template>
</el-table-column>
<el-table-column prop="" label="打印序号" align="center" />
<el-table-column
prop="createTime"
label="创建时间"
align="center"
/>
</el-table>
<pagination
:total="ConsolidationList.length"
:page.sync="page4.pageNum"
:limit.sync="page4.pageSize"
v-show="ConsolidationList.length > 0"
/>
data() {
return {
spanArr: [], //遍历数据时,根据相同的标识去存储记录
pos: 0, // 二维数组的索引
ConsolidationList :[]
},
methods:{
//获取数据
queryAssembleRecord({ orderBillId: id })
.then((res) => {
this.loading = false;
if (res.data.data) {
this.ConsolidationList = res.data.data;
this.getSpanArr(res.data.data);
// this.ConsolidationListData = res.data.data;
console.log(this.spanArr);
} else {
this.ConsolidationList = [];
}
})
.catch(() => {
this.ConsolidationList = [];
});
// methods中定义方法
getSpanArr(data) {
let that = this;
//页面展示的数据,不一定是全部的数据,所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造 成数据渲染混乱
that.spanArr = [];
that.pos = 0;
//遍历数据
data.forEach((item, index) => {
//判断是否是第一项
if (index === 0) {
this.spanArr.push(1);
this.pos = 0;
} else {
//不是第一项时,就根据标识去存储
if (data[index].labelCode === data[index - 1].labelCode) {
// 查找到符合条件的数据时每次要把之前存储的数据+1
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
// 没有符合的数据时,要记住当前的index
this.spanArr.push(1);
this.pos = index;
}
}
});
// 表格序号
let Nosort = 0;
for (let n in this.spanArr) {
if ( this.spanArr[n] > 0) {
Nosort += 1;
this.$set(data[n], "Nosort", Nosort);
}
}
console.log(this.spanArr, this.pos);
},
//合并单元格
cellMerge({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 || columnIndex === 1) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
},
}