vue中element-ui合并列

vue中element-ui合并列

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

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

这样子的话数据格式根据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>
    <!--<div class="panel">-->
      <!--<SkuList></SkuList>-->
    <!--</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>