el-table多级表头数据处理

来了个需求说是要加一个多级表头的表格，本来想着很快就完事的，结果一看数据，直接两眼一黑...，先看看效果图吧。

  然后再看一下返回的数据格式....

当时看到这个数据只觉得两眼一黑，一阵无语，处理数组处理的多了看到这些数据感觉好陌生，没办法，工作还是要继续的，然后来看一看解决办法。

因为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;
        },

日期做了限制，只能选取当月的，不能跨月选取

这些东西说难也不难，但对于我这种菜鸡还是有点难度的( ŏ̥̥̥̥ŏ̥̥̥̥ )，权当记录一下，勿喷。૮₍ ˊᗜˋ₎ა 。