修改代码

src/api/demoData1.js

+import request from '@/utils/request'
+
+/**
+* 1. 列表查询
+* 2. 查询详细信息
+*/
+
+// 1. 查询列表
+export function listDemoData1(query) {
+  return request({
+    url: '/demodata1/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 2. 查询信息
+export function listAll(query) {
+  return request({
+    url: '/demodata1/listAll',
+    method: 'get',
+    params: query
+  })
+}
+export function searchAaa(query) {
+  return request({
+    url: '/demodata1/searchAaa',
+    method: 'get',
+    params: query
+  })
+}
+export function searchCcc(query) {
+  return request({
+    url: '/demodata1/searchCcc',
+    method: 'get',
+    params: query
+  })
+}
+export function searchCccc(query) {
+  return request({
+    url: '/demodata1/searchCccc',
+    method: 'get',
+    params: query
+  })
+}
+export function searchEee(query) {
+  return request({
+    url: '/demodata1/searchEee',
+    method: 'get',
+    params: query
+  })
+}

src/components/Pagination/Pagination1.vue

+<template>
+  <div :class="{'hidden':hidden}" class="pagination-container">
+    <el-pagination
+      :background="background"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="rows"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import { scrollTo } from '@/utils/scroll-to'
+
+export default {
+  name: 'Pagination1',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 20
+    },
+    rows: {
+      type: Array,
+      default() {
+        return [100, 200, 300, 400]
+      }
+    },
+    layout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      }
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pagination-container {
+  background: #fff;
+  padding: 15px;
+  text-align: right;
+}
+.pagination-container.hidden {
+  display: none;
+}
+</style>

src/views/demoData/demoData1.vue

+<template>
+  <div class="app-container">
+    <el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
+      <el-form-item label="" prop="aaa">
+        <el-select
+          v-model="queryParams.aaa"
+          placeholder="请选择aaa"
+          filterable
+          clearable
+          size="small"
+          style="width: 150px"
+        >
+          <el-option
+            v-for="(item,index) in aaaList"
+            :key="index"
+            :label="item.month"
+            :value="item.month"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="" prop="ccc">
+        <el-select
+          v-model="queryParams.ccc"
+          placeholder="请选择ccc"
+          filterable
+          clearable
+          size="small"
+          style="width: 150px"
+        >
+          <el-option
+            v-for="(item,index) in cccList"
+            :key="index"
+            :label="item.ccc"
+            :value="item.ccc"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="" prop="eee">
+        <el-select
+          v-model="queryParams.eee"
+          placeholder="请选择eee"
+          filterable
+          clearable
+          size="small"
+          style="width: 150px"
+        >
+          <el-option
+            v-for="(item,index) in eeeList"
+            :key="index"
+            :label="item.eee"
+            :value="item.eee"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="" prop="cccc">
+        <el-select
+          v-model="queryParams.cccc"
+          placeholder="请选择cccc"
+          filterable
+          clearable
+          size="small"
+          style="width: 150px"
+        >
+          <el-option
+            v-for="(item,index) in ccccList"
+            :key="index"
+            :label="item.cccc"
+            :value="item.cccc"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button
+          :class="commonField.queryClass"
+          :type="commonField.typePrimary"
+          :icon="commonField.queryIcon"
+          :size="commonField.smallSize"
+          @click="handleQuery"
+        >查询</el-button>
+        <el-button
+          :class="commonField.resetClass"
+          :icon="commonField.resetIcon"
+          :size="commonField.smallSize"
+          @click="resetQuery"
+        >重置</el-button>
+      </el-form-item>
+    </el-form>
+    <div class="placeholder" />
+    <div style="padding:5px 10px">
+
+      <div class="mb12 font-small-bold">列表</div>
+      <el-table v-loading="loading" border :data="demoData1List">
+        <el-table-column fixed type="index" label="序号" width="55" align="center" />
+        <el-table-column fixed label="客户" prop="ccc" :show-overflow-tooltip="true" width="150">
+          <template slot-scope="scope">
+            {{ scope.row.ccc || '-' }}
+          </template>
+        </el-table-column>
+        <!--         动态生成列 -->
+        <template v-for="month in dynamicColumns">
+          <el-table-column :key="month" :label="month" prop="aaa" :show-overflow-tooltip="true" width="150">
+            <template slot-scope="scope">
+              {{ scope.row[month] || '-' }}
+            </template>
+          </el-table-column>
+        </template>
+      </el-table>
+    </div>
+    <pagination1
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.page"
+      :limit.sync="queryParams.rows"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  listAll, listDemoData1, searchAaa, searchCcc, searchCccc, searchEee
+} from '@/api/demoData1'
+import commonField from '@/utils/commonField'
+import pagination1 from '@/components/Pagination/Pagination1.vue'
+export default {
+  name: 'DemoData1',
+  components: {
+    pagination1
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 总条数
+      total: 0,
+      // 表格数据
+      demoData1List: [],
+      dynamicColumns: [], // 用于动态生成列的数组
+      aaaList: [],
+      cccList: [],
+      ccccList: [],
+      eeeList: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        page: 1,
+        rows: 100,
+        aaa: undefined,
+        bbb: undefined,
+        ccc: undefined,
+        ddd: undefined,
+        cccc: undefined,
+        dddd: undefined,
+        eee: undefined,
+        fff: undefined,
+        ggg: undefined,
+        hhh: undefined,
+        iii: undefined,
+        jjj: undefined,
+        kkk: undefined,
+        lll: undefined,
+        mmm: undefined
+      },
+      scrollContainerHeight: 0,
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      }
+    }
+  },
+  computed: {
+    commonField() {
+      return commonField
+    }
+  },
+  created() {
+    this.getList() // 列表查询
+    this.getaaaList()
+    this.getcccList()
+    this.getccccList()
+    this.geteeeList()
+  },
+
+  methods: {
+    /** 获取aaa标签*/
+    getaaaList() {
+      searchAaa().then(response => {
+        if (response.code === 200) {
+          this.aaaList = response.data
+        }
+      })
+    },
+    /** 获取ccc标签*/
+    getcccList() {
+      searchCcc().then(response => {
+        if (response.code === 200) {
+          this.cccList = response.data
+        }
+      })
+    },
+    /** 获取cccc标签*/
+    getccccList() {
+      searchCccc().then(response => {
+        if (response.code === 200) {
+          this.ccccList = response.data
+        }
+      })
+    },
+    /** 获取eee标签*/
+    geteeeList() {
+      searchEee().then(response => {
+        if (response.code === 200) {
+          this.eeeList = response.data
+        }
+      })
+    },
+    /** 查询列表 */
+    getList() {
+      this.loading = true
+      listDemoData1(this.queryParams).then(
+        response => {
+          console.log('数据源', response)
+          this.demoData1List = response.rows
+          this.formatData(response.rows)
+          this.total = response.total
+          this.loading = false
+        }
+      )
+
+      console.log('数据源', this.demoData1List)
+    },
+    formatData(data) {
+      // 遍历数据，提取不重复的月份作为列标签
+      const months = new Set()
+      data.forEach(item => {
+        Object.keys(item).forEach(key => {
+          if (key !== 'ccc' && key !== '__row_number__') {
+            months.add(key)
+          }
+        })
+      })
+      console.log('months是:', months)
+      // 将 Set 对象转换为数组
+      const sortedMonths = Array.from(months)
+      // 对数组进行排序
+      sortedMonths.sort()
+      console.log('排序后的值:', sortedMonths)
+      this.dynamicColumns = sortedMonths
+      console.log('绑定的值', this.dynamicColumns)
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        businessId: undefined,
+        ggg: undefined,
+        dddd: undefined,
+        mmm: undefined,
+        jjj: undefined,
+        iii: undefined,
+        lll: undefined,
+        ccc: undefined,
+        bbb: undefined,
+        cccc: undefined,
+        fff: undefined,
+        aaa: undefined,
+        ddd: undefined,
+        kkk: undefined,
+        eee: undefined,
+        hhh: undefined,
+        flag: '1'
+      }
+      this.resetForm('form')
+    },
+    /** 查询按钮操作 */
+    handleQuery() {
+      // this.queryParams.page = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams = {
+        page: 1,
+        rows: 100,
+        ggg: undefined,
+        dddd: undefined,
+        mmm: undefined,
+        jjj: undefined,
+        iii: undefined,
+        lll: undefined,
+        ccc: undefined,
+        bbb: undefined,
+        cccc: undefined,
+        fff: undefined,
+        aaa: undefined,
+        ddd: undefined,
+        kkk: undefined,
+        eee: undefined,
+        hhh: undefined
+      }
+      this.handleQuery()
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .app-container {
+    font-size: 18px;
+    padding: 0;
+
+  .placeholder {
+    height: 1.3vh;
+    background-color: #F4F4F4;
+    margin-bottom: 10px
+  }
+  }
+</style>