根据月份动态添加表的列

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

小菜鸡记录一下学习到的知识，如有错误欢迎指正

---

一、如何根据月份动态添加表的列？

二、使用步骤

1.HTML部分

代码如下（示例）：

 <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-class-name="tableHeaderCellStyle"
        :cell-class-name="tableCellStyle"
        :row-class-name="className"
        maxHeight="678"
      >
        <el-table-column fixed="left" prop="number" label="序号" align="center">
        </el-table-column>
        <el-table-column
          fixed="left"
          prop="name"
          label="名称"
          width="240"
          align="center"
        >
        </el-table-column>
        <el-table-column :label="dqYear - 1 + '年'" align="center">
          <el-table-column prop="totalVal" label="总值(万元)" align="center">
          </el-table-column>

          <el-table-column
            prop="totalValLast"
            label="同期(万元)"
            align="center"
          >
          </el-table-column>

          <el-table-column prop="yearOnYear" label="同比" align="center">
          </el-table-column>

          <el-table-column prop="monthOnMonth" label="环比%" align="center">
          </el-table-column>
          <el-table-column prop="proportion" label="占比%" align="center">
          </el-table-column>
          <el-table-column prop="difference" label="差值%" align="center">
          </el-table-column>
          <el-table-column prop="pullRate" label="拉动率%" align="center">
          </el-table-column>
          <el-table-column
            prop="contributionRate"
            label="贡献率%"
            align="center"
          >
          </el-table-column>
        </el-table-column>
        <el-table-column
          v-for="(item1, index1) in c" 
          :label="dqYear + '年1-' + (m + (index1 + 2)) + '月'"
          :key="index1"
          align="center"
          class="meinian"
        >
          <el-table-column
            v-for="(item2, index2) in columns"
            :key="index2"
            :prop="item2.prop + (index1 + 2)"
            :label="item2.label"
            align="center"
          >
          </el-table-column>
        </el-table-column>
      </el-table>

需要动态加载的列，通过循环数组c确定添加几个动态列，循环columns数组，通过prop不同的值获取相对应月份的数据。

2.js代码通过接口获取数据，并对列进行控制

代码如下（示例）：

 async gettableData() {
      await this.$http
        .get(this.$serverPath + "/api/wall/hangye", {})
        .then((res) => {
          this.tableData = res.data.result.quannian;
          this.BaseUrl = res.data.result.url;
          this.hh = res.data.result;
          console.log(this.hh);
        });
      this.addColumns();
    },
    addColumns() {
      var d = new Date();
      var month = d.getMonth() + 1,
        year = d.getFullYear();
      this.dqMonth = month;
      this.dqYear = year;
      var mon = this.dqMonth;

      for (var i = 2; i < mon; i++) {
        let newcolumn = {};
        this.columns = [
          { prop: "totalVal", label: "总值" },
          { prop: "totalValLast", label: "同期" },
          { prop: "yearOnYear", label: "同比%" },
          { prop: "monthOnMonth", label: "环比%" },
          { prop: "proportion", label: "占比%" },
          { prop: "difference", label: "差值%" },
          { prop: "pullRate", label: "拉动率%" },
          { prop: "contributionRate", label: "贡献率%" },
        ];
        this.c.push(newcolumn);//将新添加的列存放到数组c中
        switch (i) {
          case 2:
            this.tableData1 = this.hh.month2;
            for (var j = 0; j < this.tableData1.length; j++) {
              this.$set(
                this.tableData[j],
                "totalVal2",
                this.tableData1[j].totalVal
              );
              this.$set(
                this.tableData[j],
                "totalValLast2",
                this.tableData1[j].totalValLast
              );
              this.$set(
                this.tableData[j],
                "yearOnYear2",
                this.tableData1[j].yearOnYear
              );
              this.$set(
                this.tableData[j],
                "monthOnMonth2",
                this.tableData1[j].monthOnMonth
              );
              this.$set(
                this.tableData[j],
                "proportion2",
                this.tableData1[j].proportion
              );
              this.$set(
                this.tableData[j],
                "difference2",
                this.tableData1[j].difference
              );
              this.$set(
                this.tableData[j],
                "pullRate2",
                this.tableData1[j].pullRate
              );
              this.$set(
                this.tableData[j],
                "contributionRate2",
                this.tableData1[j].contributionRate
              );
            }

            break;
             ..........................
          case 12:
            this.tableData1 = this.hh.month12;
            console.log(this.tableData1.length);
            for (var j = 0; j < this.tableData1.length; j++) {
              this.$set(
                this.tableData[j],
                "totalVal12",
                this.tableData1[j].totalVal
              );
              this.$set(
                this.tableData[j],
                "totalValLast12",
                this.tableData1[j].totalValLast
              );
              this.$set(
                this.tableData[j],
                "yearOnYear12",
                this.tableData1[j].yearOnYear
              );
              this.$set(
                this.tableData[j],
                "monthOnMonth12",
                this.tableData1[j].monthOnMonth
              );
              this.$set(
                this.tableData[j],
                "proportion12",
                this.tableData1[j].proportion
              );
              this.$set(
                this.tableData[j],
                "difference12",
                this.tableData1[j].difference
              );
              this.$set(
                this.tableData[j],
                "pullRate12",
                this.tableData1[j].pullRate
              );
              this.$set(
                this.tableData[j],
                "contributionRate12",
                this.tableData1[j].contributionRate
              );
            }

            break;
        }
      }
    },

调用方法：this.$set( target, key, value ) ，为每个月份重新赋值。
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值

---

3.data里面接收的值

  data() {
    return {
      tableData: [],//接收表的数据
      tableData1: [],//用于存放获取到的相对应月份的数据
      dqYear: "",//用于存当前的年份
      dqMonth: "",//用于存当前的月份
      m: "",
      columns: [],//存放表头的数组
      c: [],//将新添加的列存放到数组c中
      hh: {},//存放所有月份的数据
      BaseUrl: "",
    };
  },