elementUI el-table动态添加列考勤数据不显示的问题

Question

如何将以下数据** 'event': '值班' **显示在element el-table中对应的日期列中行内呢

<template>
  <!--  备件列表-->
  <el-container :style="{ height: containerHeight + 'px' }">
    <!-- 表格数据 -->
    <el-main style="padding: 5px">
      <!-- 查询条件 -->
      <div>
        <!-- 月份 -->
        <div class="month-con">
          <i class="el-icon-arrow-left" @click="reduceMonth()" />
          &nbsp;
          <span class="month">{{ month() }}</span>
          <span>{{ time.year }}</span>
          &nbsp;
          <i class="el-icon-arrow-right" @click="addMonth()" />
        </div>

        <el-table
          ref="table"
          :cell-style="{ textAlign: 'center' }"
          :data="tableOldData"
          :header-cell-style="{background:'#f4f6f8',color:'#909399',textAlign: 'center'}"
          border
          height="100%"
          highlight-current-row
          size="mini"
          style="width: 100%;"
        >
          <el-table-column fixed="left" label="员工" width="200px">
            <template slot-scope="{row}">
              <div>{{ row.name }}</div>
              <div>手机号： {{ row.tel }}</div>
              <div>邮箱： {{ row.email }}</div>
            </template>
          </el-table-column>
          <el-table-column
            v-for="item in visibleCalendar"
            :key="item.keyDate"
            :label="item.day + '日' + '，' + item.week"
            width="100"
          >
            <template slot-scope="{row}">
              {{ row.event }}
            </template>
          </el-table-column>
        </el-table>

      </div>

    </el-main>
  </el-container>
</template>
<script>

export default {
  name: 'SpareDataList',
  data() {
    return {
      containerHeight: 0, // 容器高度
      tableHeight: 0, // 表格高度
      time: {
        year: new Date().getFullYear(),
        month: new Date().getMonth()
      }, tableData: [{
        'name': '张三',
        'tel': '133300008888',
        'email': '[e-mail]',
        'dayData': {
          '2023-05-25': {
            'startTime': '2023-05-25 09:00:00',
            'endTime': '2023-05-25 17:59:59',
            'event': '值班'
          }
        }
      },
      {
        'name': '刘德华',
        'tel': '133300008888',
        'email': '[e-mail]',
        'dayData': {
          '2023-09-01': {
            'startTime': '2023-05-25 09:00:00',
            'endTime': '2023-05-25 17:59:59',
            'event': '值班'
          },
          '2023-09-03': {
            'startTime': '2023-05-22 09:00:00',
            'endTime': '2023-05-22 17:59:59',
            'event': '值班'
          }
        }
      }]
    }
  },
  computed: {
    // 获取当前月份时间日期
    visibleCalendar: function() {
      // 获取今天的年月日
      const today = new Date()
      today.setHours(0)
      today.setMinutes(0)
      today.setSeconds(0)
      today.setMilliseconds(0)

      const calendarArr = []
      // 获取当前月份第一天
      const currentFirstDay = new Date(this.time.year, this.time.month, 1)
      const d = new Date(this.time.year, this.time.month + 1, 0)
      const currentMonthDay = d.getDate()
      // 获取第一天是周几，注意周日的时候getDay()返回的是0，要做特殊处理
      const weekDay = currentFirstDay.getDay() === 0 ? 7 : currentFirstDay.getDay()
      // 以当前月份的第一天作为第一天
      const startDay = currentFirstDay.getTime()

      // 利用当前月份一共有多少天来显示日历表头
      for (let i = 0; i < currentMonthDay; i++) {
        const date = new Date(startDay + i * 24 * 3600 * 1000)
        // console.log(date,'date');
        const Y = date.getFullYear() + '-'// 年
        const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'// 月
        const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ''// 日
        const nowDate = Y + M + D
        calendarArr.push({
          date: new Date(startDay + i * 24 * 3600 * 1000),
          year: date.getFullYear(),
          month: date.getMonth(),
          week: this.getweekday(date),
          day: date.getDate(),
          keyDate: nowDate
        })
      }
      return calendarArr
    },
    // tableData就是得到的接口返回的数据
    // tableOldData就是通过计算属性得到的最终的渲染表格的数据集合
    // visibleCalendar是在上一步骤中得到的日期时间集合
    // keyDate是日期时间集合里面的一个字段，用来作为判断依据的
    tableOldData() {
      const oldData = []
      this.tableData.forEach(item => {
        const newItem = { ...item }
        const dayData = newItem.dayData
        newItem.dayData = {}
        this.visibleCalendar.forEach(date => {
          const oldDate = date.keyDate
          if (dayData[oldDate]) {
            newItem.dayData[oldDate] = dayData[oldDate]
          } else {
            newItem.dayData[oldDate] = {}
          }
        })
        oldData.push(newItem)
      })
      return oldData
    }
  },
  watch: {},
  created() {
  },
  updated() {

  },
  mounted() {
    this.$nextTick(() => {
      // 内容高度
      this.containerHeight = window.innerHeight - 85
      // 表格高度
      this.tableHeight = window.innerHeight - 220
    })
  },
  methods: {
    month(data) {
      return this.time.month + '月'
    },
    getweekday(date) {
      var weekArray = new Array('日', '一', '二', '三', '四', '五', '六')
      var week = weekArray[new Date(date).getDay()]// 注意此处必须是先new一个Date

      return week
    },
    reduceMonth() {
      if (this.time.month > 0) {
        this.time.month = this.time.month - 1
      } else {
        this.time.month = 11
        this.time.year = this.time.year - 1
      }
    },
    addMonth() {
      if (this.time.month < 11) {
        this.time.month = this.time.month + 1
      } else {
        this.time.month = 0
        this.time.year = this.time.year + 1
      }
    }
  }
}
</script>

这是引用 这个师傅的帖子 但是到了最后一步
https://blog.csdn.net/qq_44938769/article/details/131376375?spm=1001.2014.3001.5502
**再将得到的日期数据渲染至表格中，就可以得到一张以日期时间为表头的动态表格了;**这一步我试了很多办法 百度也查询了 始终只能显示姓名和邮箱手机号 但是后边值班内容就是对应不到每个日期上也不知道为什么,还请师傅指点迷津,

Answer 1

是不是你限制的文字没有出现造成了显示不了