vue 根据select的下拉框选中数据，请求时多个分别展示不同的表格结构动态 渲染

需要展示的4种表格结构

 4种表格形态：年度 半年度 季度 月度数据展示

结构：

 <el-table :border="true" key="table1" :data="tableList">
        <el-table-column
          v-if="deptShow"
          prop="deptName"
          align="center"
          label="部门"
          width="140"
        />
        <el-table-column
          v-if="costCentShow"
          prop="costCenterName"
          align="center"
          label="成本中心"
          width="140"
        />
        <el-table-column
          v-if="projecShow"
          prop="projectName"
          align="center"
          label="项目"
          width="140"
        />
        <el-table-column
          align="center"
          :label="handelLabel(index)"
          v-for="(item, index) in cellLen"
          :key="index"
          min-width="200"
        >
          <el-table-column
            align="center"
            label="预算/冻结/消费/可用"
            min-width="200"
          >
            <template #default="scope">
              <span>{{ scope.row.infoList[index].budgetPrice || 0 }}</span
              >/<span style="color:red">{{
                scope.row.infoList[index].freezePrice || 0
              }}</span
              >/<span style="color:blue">{{
                scope.row.infoList[index].executedPrice || 0
              }}</span
              >/<span style="color:green">{{
                scope.row.infoList[index].availablePrice || 0
              }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="合计" width="240">
          <el-table-column
            align="center"
            label="预算/冻结/消费/可用"
            width="240"
          >
            <template #default="scope">
              <span>{{ scope.row.budgetPrice }}</span
              >/<span style="color:red">{{ scope.row.freezePrice }}</span
              >/<span style="color:blue">{{ scope.row.executedPrice }}</span
              >/<span style="color:green">{{ scope.row.availablePrice }}</span>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>

计算属性里面：

 computed: {
    cellLen() {
      if (this.tableShow === "1") {
        return new Array(1).fill(1);
      } else if (this.tableShow === "2") {
        return new Array(2).fill(1);
      } else if (this.tableShow === "3") {
        return new Array(4).fill(1);
      } else {
        return new Array(12).fill(1);
      }
    }
  },

方法里面：

  handelLabel(index) {
      if (this.tableShow === "1") {
        return `${this.currentYear}年`;
      } else if (this.tableShow === "2") {
        return `${this.currentYear}年${index === 0 ? "上" : "下"}半年`;
      } else if (this.tableShow === "3") {
        return `${this.currentYear}年第${
          index === 0 ? "一" : index === 1 ? "二" : index === 2 ? "三" : "四"
        }季度`;
      } else {
        return `${this.currentYear}-${
          index + 1 > 9 ? index + 1 : "0" + (index + 1)
        }`;
      }
    },

( tips:  结构循环的 cellLen 在计算属性中发生变化，那么结构会随之而变化，进而触发方法：handelLabel）

最终效果图：