ant design vue, a-table, 根据当前日期的所在周拼接表格内容

需求：根据当前日期的所在周，拼接表格的内容并弹出弹窗

20241027更新：调整了表格data的数据格式，每一个td的内容都是独立的

【示例图】

如图所示，右侧关于日期的th与td是通过template循环出来的

点击按钮可以切换批量选中的样式进行操作

点击按钮出现弹窗（20241027这个代码里面没有这个弹窗，要自己加）

【完整代码20241027】

<template>
  <div style="margin: 16px;">
    <p>
      This Monday is {{ pickRangeDate[0] }} and this Sunday is {{ pickRangeDate[1] }}
    </p>
    <a-space>
      <a-button type="primary" v-if="!isBatchSetting" @click="isBatchSetting = true">BatchSetting</a-button>
      <a-button type="default" v-else @click="handleExitChoose">Exit</a-button>
      <a-button type="default">Import</a-button>
    </a-space>
    <a-table style="margin-top: 16px;" :scroll="{ x: columns.length * 140 }" :columns="columns" :data-source="tableData"
      :rowKey="(record) => { return record.id }" :pagination="false">
      <template v-for="(obj, i) in dateData">
        <!-- th 在设置thObj时做对应，设置slots: { title: this.dateData[0]['list'][k].dateName } -->
        <template v-if="i == 0">
          <div v-for="(item) in obj.list" :slot="item.dateName" :key="item.id">
            <span>
              {{ item.dateName }} {{ item.weekday }}
            </span>
          </div>
        </template>
      </template>
      <!-- td -->
      <div v-for="(n, i) in this.columns.length - 1" :key="(i + 9).toString(36) + i" :slot="'data' + i + 0"
        slot-scope="text,record">
        <template v-if="!isBatchSetting">
          <div class="cus-choose-btn" @click="handleBtn(record['data' + i + 0].id)">
            <div class="ant-btn" :class="record['data' + i + 0].isChecked ? 'ant-btn-primary' : ''"
              v-if="record['data' + i + 0].list.length == 0"><span>Set</span></div>
            <div class="ant-btn ant-btn-background-ghost"
              :class="record['data' + i + 0].isChecked ? 'ant-btn-primary' : ''" v-else><span>List</span>({{
                record['data' + i +
                  0].list.length }})</div>
          </div>
        </template>
        <template v-else>
          <a-checkbox v-model="record['data' + i + 0].isChecked" @change="onChange($event, record['data' + i + 0].id)">
            <span v-if="record['data' + i + 0].list.length == 0">Set</span>
            <span v-else>List({{ record['data' + i + 0].list.length }})</span>
          </a-checkbox>
        </template>
      </div>
    </a-table>
  </div>
</template>
<script>
export default {
  created() {
    this.setMockData()
    this.setColData()

    // 得到本周一和周日
    let today = new Date()
    this.getStartAndEndOfWeek(today)
  },
  data() {
    return {
      pickRangeDate: [],
      isBatchSetting: false,
      dateData: [],
      columns: [
        {
          title: 'ItemName',
          dataIndex: 'name',
          key: 'name',
          width: 120,
        }
      ],
      tableData: [
        {
          id: 1000001,
          name: 'item01',
        },
        {
          id: 1000002,
          name: 'item02',
        },
        {
          id: 1000003,
          name: 'item03',
        },
        {
          id: 1000004,
          name: 'item04',
        },
        {
          id: 1000005,
          name: 'item05',
        },
      ],
    }
  },
  methods: {
    // 退出多选
    handleExitChoose() {
      this.isBatchSetting = false
      for (let i = 0; i < this.tableData.length; i++) {
        for (let k in this.tableData[i]) {
          if (this.tableData[i][k].id) {
            this.tableData[i][k].isChecked = false
          }
          this.tableData[0]['data00'].isChecked = true
        }
      }
    },
    // 表格单选日期按钮
    handleBtn(val) {
      for (let i = 0; i < this.tableData.length; i++) {
        for (let k in this.tableData[i]) {
          if (this.tableData[i][k].id) {
            this.tableData[i][k].isChecked = false
            if (this.tableData[i][k].id == val) {
              this.tableData[i][k].isChecked = true
            }
          }
        }
      }
      this.$forceUpdate();
    },
    setMockData() {
      var weekDayArr = ["Mon.", "Tues.", "Wed.", "Thur.", "Fri.", "Sat.", "Sun."];
      const today = new Date();
      const dayOfWeek = today.getDay(); // 0 表示周日，1-6 表示周一到周六
      // 调整今天的日期到本周的周一
      today.setDate(today.getDate() - dayOfWeek + 1);

      for (var j = 0; j < this.tableData.length; j++) {
        let trData = {
          id: Date.now() + j + 'tr',
          list: []
        }
        this.dateData.push(trData)

        for (var i = 0; i < 7; i++) {
          // 创建一个新的日期对象来表示这一天 (这里可以优化，写得有点冗余了)
          const day = new Date(today); // 将日期增加一天
          day.setDate(day.getDate() + i);
          let obj = {
            id: Date.now() + i + j,
            // 本周7天
            dateName: day.toISOString().split('T')[0],
            // 判断某个日期是周几
            weekday: weekDayArr[i],
            data: i == 0 && j == 0 ? [] : [
              {
                id: 'list' + j + i,
                name: 'food01' + j + i,
                value: 50
              },
              {
                id: 'list1' + j + i,
                name: 'food02' + j + i,
                value: 50
              },
            ],
            isChecked: i == 0 && j == 0 ? true : false
          }

          this.dateData[j]['list'].push(obj)
        }
      }
    },
    setColData() {
      for (let j = 0; j < this.tableData.length; j++) {
        for (let k = 0; k < this.dateData[j]['list'].length; k++) {
          // th
          if (j == 0) {
            let dataColNmae = 'data' + k + j
            let thObj = {
              slots: { title: this.dateData[j]['list'][k].dateName }, // th slot 关键句，与dateData关联
              dataIndex: dataColNmae,
              key: dataColNmae,
              width: 140,
              scopedSlots: { customRender: 'data' + k + j }, // td slot 关键句，与tableData的data做对应
            }
            this.columns.push(thObj)
          }
          // td  k:col  j:row
          this.tableData[j]['data' + k + 0] = {}
          this.tableData[j]['data' + k + 0]['id'] = 'td' + j + k
          this.tableData[j]['data' + k + 0]['list'] = this.dateData[j]['list'][k].data
          this.tableData[j]['data' + k + 0]['isChecked'] = this.dateData[j]['list'][k].isChecked
        }
      }
      // console.log('this.columns', this.columns);
      // console.log('this.tableData', this.tableData);
      // console.log('this.dateData', this.dateData);
    },
    onChange(e, id) {
      console.log(id);
      // console.log(`checked = ${e.target.checked}`);
      for (let i = 0; i < this.tableData.length; i++) {
        for (let k in this.tableData[i]) {
          if (this.tableData[i][k].id) {
            if (this.tableData[i][k].id == id) {
              this.tableData[i][k].isChecked = e.target.checked
            }
          }
        }
      }
      this.$forceUpdate(); // 强制刷新
    },
    // 得到本周一到周日 （这里没用到这个函数）
    getStartAndEndOfWeek(date) {
      date = new Date(date);
      let currentDayOfWeek = date.getDay(); // 0 (Sunday) - 6 (Saturday)
      let start = new Date(date);
      let end = new Date(date);
      // 得到本周的周一
      start.setDate(start.getDate() - (currentDayOfWeek - 1) + (currentDayOfWeek === 0 ? -6 : 0));
      // 得到本周的周日
      end.setDate(end.getDate() + (7 - currentDayOfWeek) + (currentDayOfWeek === 0 ? 0 : 0));
      this.pickRangeDate[0] = start.toISOString().split('T')[0]
      this.pickRangeDate[1] = end.toISOString().split('T')[0]
    },
  }
}
</script>

<style scoped lang="less">
.cus-choose-btn {
  .ant-btn {
    height: auto;
  }
}

.cus-choose-btn {
    .ant-btn-background-ghost {
        color: #1890ff;
        background: transparent !important;
        border-color: #1890ff;
    }
    .ant-btn-primary.ant-btn-background-ghost {
        background: #1890ff !important;;
        border-color: #1890ff;
        color: #fff;
    }
}


.cus-choose-btn {
    .ant-btn {
        height: 24px;
        line-height: 24px;
    }
    &.btn-yell {
        .ant-btn {
          position: relative;
          border-color: #faad14;
          color: #faad14;
        }
        .ant-btn-primary.ant-btn-background-ghost {
            background: rgba(250, 173, 20, 0.15) !important;
        }
      }
}
</style>

【相关文章】

ant-design-vue, a-table,固定左侧2列，根据日期动态生成右侧表格数据_ant desgin 动态生成表格-CSDN博客