vue中element-ui合并列

淩亂°似流年 2022-03-16 04:04 902阅读 0赞

# vue中element-ui合并列 #

#### 在一些日常操作中，后台不会给出令前端满意的数据结构，此时就需要我们自己做出格式修改。 ####

#### 如图，设计需要这样的表单结构 ####

![设计者需要的表单][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODUxNjY4OA_size_16_color_FFFFFF_t_70]

#### 这样子的话数据格式根据elememt中所要求的数据格式，应为： ####

tableData6: [{ 
              id: '12987122',
              name: '王小虎',
              amount1: '234',
              amount2: '3.2',
              amount3: 10
            }, { 
              id: '12987123',
              name: '王小虎',
              amount1: '165',
              amount2: '4.43',
              amount3: 12
            }, { 
              id: '12987124',
              name: '王小虎',
              amount1: '324',
              amount2: '1.9',
              amount3: 9
            }, { 
              id: '12987125',
              name: '王小虎',
              amount1: '621',
              amount2: '2.2',
              amount3: 17
            }, { 
              id: '12987126',
              name: '王小虎',
              amount1: '539',
              amount2: '4.1',
              amount3: 15
            }]
            // 数据为element示例数据不是本文所要数据

#### 但是后台给出的数据结构没有经过处理，因此和element数据结构严重不符，后端数据结构为： ####

[
        { 
            name: 'test01',
            paySkuDetailVOs: [
                { 
                    classType: 2,
                    feeType: 1,
                    periodType: 0,
                    price: 230,
                },
                { 
                    classType: 2,
                    feeType: 1,
                    periodType: 1,
                    price: 7000,
                },
                { 
                    classType: 4,
                    feeType: 1,
                    periodType: 2,
                    price: 32322.2,
                },
                { 
                    classType: 4,
                    feeType: 1,
                    periodType: 2,
                    price: 32322.2,
                },
                { 
                    classType: 4,
                    feeType: 1,
                    periodType: 2,
                    price: 32322.2,
                },
                { 
                    classType: 5,
                    feeType: 2,
                    periodType: 3,
                    price: 50000,
                },
                { 
                    classType: 5,
                    feeType: 2,
                    periodType: 4,
                    price: 600,
                },
                { 
                    classType: 7,
                    feeType: 2,
                    periodType: 5,
                    price: 2555.03,
                },
            ],
            storeIds: [48, 46, 47],
        },
        { 
            name: 'test02',
            paySkuDetailVOs: [
                { 
                    classType: 2,
                    feeType: 1,
                    periodType: 0,
                    price: 230,
                },
                { 
                    classType: 2,
                    feeType: 1,
                    periodType: 1,
                    price: 7000,
                },
                { 
                    classType: 4,
                    feeType: 1,
                    periodType: 2,
                    price: 32322.2,
                },
                { 
                    classType: 5,
                    feeType: 2,
                    periodType: 3,
                    price: 50000,
                },
                { 
                    classType: 5,
                    feeType: 2,
                    periodType: 4,
                    price: 600,
                },
                { 
                    classType: 7,
                    feeType: 2,
                    periodType: 5,
                    price: 2555.03,
                },
            ],
            storeIds: [48, 46, 47],
        },

#### 很糟心有木有，因此需要对数据格式进行修改 ####

### 第一步：先将数据进行合并 ###

// 接口请求
          dataInit(data) { 
            this.getSkuList(data).then((res) => { 
              console.log(res);
              this.skuList = res.obj.list;
              // 这步是想将外部name和storeIds传送给 paySkuDetailVOs中的各个对象中
              this.skuList.forEach((sku) => { 
                sku.paySkuDetailVOs.forEach((item) => { 
                  item.name = sku.name;
                  item.storeIds = sku.storeIds;
                });
              });
              const newData = [];
              this.skuList.forEach((sku) => { 
                sku.paySkuDetailVOs.forEach((item) => { 
                  newData.push(item);
                });
              });
              const listArr = [];
              newData.forEach((el) => { 
                for (let i = 0; i < listArr.length; i += 1) { 
                  if (listArr[i].feeType === el.feeType && listArr[i].classType === el.classType &&
                    listArr[i].name === el.name) { 
                    listArr[i].listInfo.push({ 
                      periodType: el.periodType,
                      price: el.price,
                    });
                    return;
                  }
                }
                const a1 = [];
                el.storeIds.forEach((item) => { 
                  a1.push(this.stores[parseInt(item, 10)]);
                });
                listArr.push({ 
                  feeType: el.feeType,
                  classType: el.classType,
                  name: el.name,
                  storeIds: el.storeIds,
                  listInfo: [{ 
                    periodType: el.periodType,
                    price: el.price,
                  }],
                });
              });
              this.skuListInfo = listArr;
              console.log(this.skuListInfo);
              this.structureProcess();
            });
          },

#### 第二步 ： 定义data中的变量 ####

data() { 
          return { 
            typeNameArr: [],
            typeNamePos: 0,
            storeArr: [],
            storePos: 0,
            feeArr: [],
            feePos: 0,
            buttonArr: [],
            buttonPos: 0,
            // 数据格式
            skuList: [],
            skuListInfo: [],
          };
        },

#### 第三步：在methods中定义一个函数，用来重置这些变量 ####

structureProcessInit() { 
            this.typeNameArr = [];
            this.typeNamePos = 0;
            this.storeArr = [];
            this.storePos = 0;
            this.feeArr = [];
            this.feePos = 0;
            this.buttonArr = [];
            this.buttonPos = 0;
          },

#### 第四步： 重置完成之后，进行数据更改 ####

structureProcess() { 
            this.structureProcessInit();
            for (let i = 0; i < this.skuListInfo.length; i += 1) { 
              if (i === 0) { 
                // 第一行必须存在
                this.typeNameArr.push(1);
                this.typeNamePos = 0;
                this.storeArr.push(1);
                this.storePos = 0;
                this.feeArr.push(1);
                this.feePos = 0;
              } else { 
                // 判断当前元素与上一个元素是否相同,eg：this.typeNamePos 是 this.typeNameArr序号
                // 第一列
                // eslint-disable-next-line no-lonely-if
                if (this.skuListInfo[i].name === this.skuListInfo[i - 1].name) { 
                  this.typeNameArr[this.typeNamePos] += 1;
                  this.typeNameArr.push(0);
                } else { 
                  this.typeNameArr.push(1);
                  this.typeNamePos = i;
                }
                // 第二列 // 按钮列
                if (this.skuListInfo[i].storeIds === this.skuListInfo[i - 1].storeIds && this.skuListInfo[i].name ===
                  this.skuListInfo[i - 1].name) { 
                  this.storeArr[this.storePos] += 1;
                  this.storeArr.push(0);
                  this.buttonArr[this.buttonPos] += 1;
                  this.buttonArr.push(0);
                } else { 
                  this.storeArr.push(1);
                  this.storePos = i;
                  this.buttonArr.push(1);
                  this.buttonPos = i;
                }
                // 第三列
                if (this.skuListInfo[i].feeType === this.skuListInfo[i - 1].feeType && this.skuListInfo[i].storeIds
                  === this.skuListInfo[i - 1].storeIds && this.skuListInfo[i].name ===
                  this.skuListInfo[i - 1].name) { 
                  this.feeArr[this.feePos] += 1;
                  this.feeArr.push(0);
                } else { 
                  this.feeArr.push(1);
                  this.feePos = i;
                }
              }
            }
          },

#### 此处数据进行数据判断，首先要求第一行必须存在，如果第一行存在，进行操作 ####

#### 第五步： 合并 ####

// 合并
          objectSpanMethod({  row, column, rowIndex, columnIndex }) { 
          // if (columnIndex === 0) { // 用于设置要合并的列
          // if (rowIndex % 2 === 0) { // 用于设置合并开始的行号
          // return { 
          // rowspan: 2, // 合并的行数
          // colspan: 1, // 合并的猎术, 设置为0则直接不显示
          // };
          // }
          // return { 
          // rowspan: 0,
          // colspan: 0,
          // };
          // }
            if (columnIndex === 0) { 
              // 第一列的合并方法
              const row1 = this.typeNameArr[rowIndex];
              const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
              return { 
                rowspan: row1,
                colspan: col1,
              };
            } else if (columnIndex === 1) { 
              // 第二列的合并方法
              const row2 = this.storeArr[rowIndex];
              const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
              return { 
                rowspan: row2,
                colspan: col2,
              };
            } else if (columnIndex === 2) { 
              // 第三列的合并方法
              const row3 = this.feeArr[rowIndex];
              const col3 = row3 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
              return { 
                rowspan: row3,
                colspan: col3,
              };
            }
          },

此时，数据转换为可以使用的数据结构

#### 全部代码 ####

<template>
      <div>
        <div class="panel">
          <el-row style="padding: 20px;">
            <el-col :span="20">
              <store-enum v-model="search.store_id" @change="searchList"></store-enum>
            </el-col>
            <el-col :span="4" style="text-align: right">
              <el-button icon="el-icon-plus" type="primary">新建价格</el-button>
            </el-col>
          </el-row>
        </div>
        
        <el-row>
          <el-col :span="24" style="text-align: right">
            <search-pagination
              :total="inquiry.total"
              :page-size="search.pageSize"
              :page-number="search.pageNumber"
              @page-change="pageChange"
            ></search-pagination>
          </el-col>
        </el-row>
        <div class="panel">
          <el-table :data="skuListInfo" :span-method="objectSpanMethod" border>
            <el-table-column prop="name" label="名称" align="center">
            </el-table-column>
            <el-table-column label="适应门店" align="center">
              <template slot-scope="scope">
                <div  v-for="(item, index) in scope.row.storeIds" :key="index">
                  { { stores[item]}}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="feeType" label="费用类型" align="center" :formatter="feeTypeFormatter">
            </el-table-column>
            <el-table-column prop="classType" label="适用产品" align="center" :formatter="classTypeFormatter">
            </el-table-column>
            <el-table-column prop="billing" label="计费方法" align="center">
              <template slot-scope="scope">
                <div>月年制度</div>
                <div  v-for="(item, index) in scope.row.listInfo" :key="index">
                  { { item.periodType}}: { { item.price}}元
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              fixed="right"
              label="操作"
              width="230">
              <template slot-scope="scope">
                <el-button size="mini" icon="el-icon-info" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="deleteRow(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        
          
        
        <el-row>
          <el-col :span="24" style="text-align: right">
            <search-pagination
              :total="inquiry.total"
              :page-size="search.pageSize"
              :page-number="search.pageNumber"
              @page-change="pageChange"
            ></search-pagination>
          </el-col>
        </el-row>
      </div>
    </template>
    
    <script>
      import {  mapState, mapActions } from 'vuex';
      import SkuList from './skuLiist';
    
      export default { 
        data() { 
          return { 
            typeNameArr: [],
            typeNamePos: 0,
            storeArr: [],
            storePos: 0,
            feeArr: [],
            feePos: 0,
            buttonArr: [],
            buttonPos: 0,
            search: { 
              child_name: '',
              phone: '',
              order_number: '',
              store_id: '',
              class_id: '',
              class_type: '',
              order_type: '',
              pay_channel: '',
              status: '',
              finance_status: '',
              start_date: '',
              end_date: '',
              storeAndClass: [],
              pageNumber: 1,
              pageSize: 10,
            },
            inquiry: { 
              total: 0,
            },
            // 数据格式
            skuList: [],
            skuListInfo: [],
          };
        },
        computed: { 
          ...mapState({ 
            stores: state => state.enumModule.stores,
            classType: state => state.enumModule.classType,
          }),
        },
        components: { 
          SkuList,
        },
        mounted() { 
          console.log(this.classType);
          this.dataInit({ 
            pageNumber: 1,
            pageSize: 10,
          });
        },
        methods: { 
          ...mapActions({ 
            getSkuList: 'price/getSkuList',
          }),
          pageChange(pageData) { 
            this.search.pageNumber = pageData.pageNumber;
            this.search.pageSize = pageData.pageSize;
            this.skuList = [];
            this.skuListInfo = [];
            this.dataInit(pageData);
            console.log(pageData);
          },
          searchList() { 
            this.search.store_id = this.search.storeAndClass[0];
            this.search.class_id = this.search.storeAndClass[1] ? this.search.storeAndClass[1].slice(6) : '';
            this.search.pageNumber = 1;
            const data = { 
              pageNumber: this.search.pageNumber,
              pageSize: this.search.pageSize,
              storeId: this.search.store_id,
            };
            this.skuList = [];
            this.skuListInfo = [];
            this.dataInit(data);
          },
          deleteRow(index, row) { 
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { 
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => { 
              // console.log(index);
              // console.log(row);
              this.$message({ 
                type: 'success',
                message: '删除成功!',
              });
            }).catch(() => { 
              this.$message({ 
                type: 'info',
                message: '已取消删除',
              });
            });
          },
          handleEdit(index, row) { 
            this.$router.push({ 
              path: '/sku/add',
              query: { 
                id: 1,
              },
            });
          },
          classTypeFormatter(row, column) { 
            const a = row.classType;
            if ((parseInt(row.classType, 10)) > 12) { 
              return '错误值';
            }
            return this.classType[a].name;
          },
          feeTypeFormatter(row, column) { 
            if (row.feeType === 1) { 
              return '学费';
            } else if (row.feeType === 23) { 
              return '定金';
            }
            return '学杂费';
          },
          structureProcessInit() { 
            this.typeNameArr = [];
            this.typeNamePos = 0;
            this.storeArr = [];
            this.storePos = 0;
            this.feeArr = [];
            this.feePos = 0;
            this.buttonArr = [];
            this.buttonPos = 0;
          },
          structureProcess() { 
            this.structureProcessInit();
            for (let i = 0; i < this.skuListInfo.length; i += 1) { 
              if (i === 0) { 
                // 第一行必须存在
                this.typeNameArr.push(1);
                this.typeNamePos = 0;
                this.storeArr.push(1);
                this.storePos = 0;
                this.feeArr.push(1);
                this.feePos = 0;
              } else { 
                // 判断当前元素与上一个元素是否相同,eg：this.typeNamePos 是 this.typeNameArr序号
                // 第一列
                // eslint-disable-next-line no-lonely-if
                if (this.skuListInfo[i].name === this.skuListInfo[i - 1].name) { 
                  this.typeNameArr[this.typeNamePos] += 1;
                  this.typeNameArr.push(0);
                } else { 
                  this.typeNameArr.push(1);
                  this.typeNamePos = i;
                }
                // 第二列 // 按钮列
                if (this.skuListInfo[i].storeIds === this.skuListInfo[i - 1].storeIds && this.skuListInfo[i].name ===
                  this.skuListInfo[i - 1].name) { 
                  this.storeArr[this.storePos] += 1;
                  this.storeArr.push(0);
                  this.buttonArr[this.buttonPos] += 1;
                  this.buttonArr.push(0);
                } else { 
                  this.storeArr.push(1);
                  this.storePos = i;
                  this.buttonArr.push(1);
                  this.buttonPos = i;
                }
                // 第三列
                if (this.skuListInfo[i].feeType === this.skuListInfo[i - 1].feeType && this.skuListInfo[i].storeIds
                  === this.skuListInfo[i - 1].storeIds && this.skuListInfo[i].name ===
                  this.skuListInfo[i - 1].name) { 
                  this.feeArr[this.feePos] += 1;
                  this.feeArr.push(0);
                } else { 
                  this.feeArr.push(1);
                  this.feePos = i;
                }
              }
            }
          },
          // 合并
          objectSpanMethod({  row, column, rowIndex, columnIndex }) { 
          // if (columnIndex === 0) { // 用于设置要合并的列
          // if (rowIndex % 2 === 0) { // 用于设置合并开始的行号
          // return { 
          // rowspan: 2, // 合并的行数
          // colspan: 1, // 合并的猎术, 设置为0则直接不显示
          // };
          // }
          // return { 
          // rowspan: 0,
          // colspan: 0,
          // };
          // }
            if (columnIndex === 0) { 
              // 第一列的合并方法
              const row1 = this.typeNameArr[rowIndex];
              const col1 = row1 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
              return { 
                rowspan: row1,
                colspan: col1,
              };
            } else if (columnIndex === 1) { 
              // 第二列的合并方法
              const row2 = this.storeArr[rowIndex];
              const col2 = row2 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
              return { 
                rowspan: row2,
                colspan: col2,
              };
            } else if (columnIndex === 2) { 
              // 第三列的合并方法
              const row3 = this.feeArr[rowIndex];
              const col3 = row3 > 0 ? 1 : 0; // 如果被合并了row = 0; 则他这个列需要取消
              return { 
                rowspan: row3,
                colspan: col3,
              };
            }
          },
          // 接口请求
          dataInit(data) { 
            this.getSkuList(data).then((res) => { 
              console.log(res);
              this.skuList = res.obj.list;
              this.search.pageNumber = res.obj.pageNumber;
              this.search.pageSize = res.obj.pageSize;
              this.inquiry.total = res.obj.total;
              this.skuList.forEach((sku) => { 
                sku.paySkuDetailVOs.forEach((item) => { 
                  item.name = sku.name;
                  item.storeIds = sku.storeIds;
                });
              });
              const newData = [];
              this.skuList.forEach((sku) => { 
                sku.paySkuDetailVOs.forEach((item) => { 
                  newData.push(item);
                });
              });
              const listArr = [];
              newData.forEach((el) => { 
                for (let i = 0; i < listArr.length; i += 1) { 
                  if (listArr[i].feeType === el.feeType && listArr[i].classType === el.classType &&
                    listArr[i].name === el.name) { 
                    listArr[i].listInfo.push({ 
                      periodType: el.periodType,
                      price: el.price,
                    });
                    return;
                  }
                }
                const a1 = [];
                el.storeIds.forEach((item) => { 
                  a1.push(this.stores[parseInt(item, 10)]);
                });
                listArr.push({ 
                  feeType: el.feeType,
                  classType: el.classType,
                  name: el.name,
                  storeIds: el.storeIds,
                  listInfo: [{ 
                    periodType: el.periodType,
                    price: el.price,
                  }],
                });
              });
              this.skuListInfo = listArr;
              console.log(this.skuListInfo);
              this.structureProcess();
            });
          },
        },
      };
    </script>
    
    <style lang="less" scoped>
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODUxNjY4OA_size_16_color_FFFFFF_t_70]: /images/20220316/0fbd3e890d0d4238935012efdf7e5466.png