来了个需求说是要加一个多级表头的表格,本来想着很快就完事的,结果一看数据,直接两眼一黑...,先看看效果图吧。
然后再看一下返回的数据格式....
当时看到这个数据只觉得两眼一黑,一阵无语,处理数组处理的多了看到这些数据感觉好陌生,没办法,工作还是要继续的,然后来看一看解决办法。
因为el-table所需的数据是数组的形式,而返回的数据是对象,所以要先将对象类型的数据处理为数组。表格中还要展示产品编号,所以需要将产品编号(SS1001-0)放到和产品名称同一级。日期列是每一个产品下面的data里面的日期(也都是对象,服辣),所以将日期单独摘出来放到一个数组中,同时将每个产品的data里面的日期加上一个time的属性名用来和单独摘出来的日期数据进行对应,到这里数据基本处理的差不多了,在测试过程中发现存放日期的数组日期排序发生了混乱,然后又将日期排下序。具体的代码在下面
这是html部分的代码
<el-table :data="tableData" style="width: 100%; margin-top: 5px" border>
<el-table-column prop="style_no" label="产品编号"> </el-table-column>
<el-table-column prop="style_name" label="产品名称"> </el-table-column>
<el-table-column label="初期库存">
<el-table-column prop="initial[qty]" label="数量"> </el-table-column>
<!-- <el-table-column prop="initial[wgt]" label="重量"> </el-table-column> -->
</el-table-column>
<el-table-column label="日期">
<template v-for="(item, index) in dateArr">
<el-table-column :label="item">
<el-table-column :prop="`date[${index}].in.qty`" label="进"> </el-table-column>
<el-table-column :prop="`date[${index}].out.qty`" label="出"> </el-table-column>
</el-table-column>
</template>
</el-table-column>
<el-table-column label="总库存">
<el-table-column prop="final[qty]" label="数量"> </el-table-column>
<!-- <el-table-column prop="final[wgt]" label="重量"> </el-table-column> -->
</el-table-column>
</el-table>
这是js部分
// 获取表格数据
getList() {
let _this = this;
_this.dateArr = [];
_this.tableData = [];
_this.timeArray = [];
if (!this.form.end_date && !this.form.begin_date) {
this.$message.error('请选择日期');
return;
}
// const currentDate = new Date();
// const currentMonth = currentDate.getMonth() + 1;
const startMonth = new Date(this.form.begin_date).getMonth() + 1;
const endMonth = new Date(this.form.end_date).getMonth() + 1;
if (startMonth != endMonth) {
this.$message.error('请勿跨月选择');
return;
}
// if (currentMonth != startMonth || currentMonth != endMonth) {
// this.$message.error('请选择当月的日期');
// return;
// }
const loading = this.$loading({
lock: true,
text: '拼命加载中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.5)'
});
apiInsaleData(this.form).then(res => {
// console.log(res);
if (res.code == 2000) {
let table = res.data.data;
_this.tableTotal = res.data.count;
_this.processingData(table);
loading.close();
} else {
this.$message.error(res.msg);
}
});
},
// 处理表格数据
processingData(table) {
let _this = this;
let timeData = [];
let num = 1;
for (let key in table) {
table[key].style_no = key;
table[key].seq = num;
num++;
_this.tableData.push(table[key]);
for (let keys in table[key].date) {
const arr = Object.keys(table[key].date);
table[key].date[keys].time = keys;
_this.dateArr.push(keys);
if (arr.length == timeData.length) {
break;
} else {
timeData.push(table[key].date[keys]);
}
}
_this.timeArray.push(timeData);
// 将timeData重新赋值为空数组,不然数据会重复
timeData = [];
}
_this.dateArr = Array.from(new Set(_this.dateArr));
_this.dateArr = _this.dateArr.sort((a, b) => new Date(a) - new Date(b));
_this.tableData.forEach((item, index) => {
item.date = _this.timeArray[index];
});
// 按照货号排序
let dataArray = _this.tableData;
// 按照 item_num 分组
let groupedData = dataArray.reduce((acc, item) => {
let key = item.item_num;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(item);
return acc;
}, {});
// 将每个分组内部的数据按照其在原始数据中的顺序进行排序
let sortedData = Object.values(groupedData).reduce((acc, group) => {
// 排序方法:按照原始键名在数据中的顺序排序
group.sort((a, b) => {
let aIndex = dataArray.findIndex(item => item.originalKey === a.originalKey);
let bIndex = dataArray.findIndex(item => item.originalKey === b.originalKey);
return aIndex - bIndex;
});
// 将排序后的分组数据合并到结果数组中
acc.push(...group);
return acc;
}, []);
_this.tableData = sortedData;
},
日期做了限制,只能选取当月的,不能跨月选取
这些东西说难也不难,但对于我这种菜鸡还是有点难度的( ŏ̥̥̥̥ŏ̥̥̥̥ ),权当记录一下,勿喷。૮₍ ˊᗜˋ₎ა 。