elementui表格按当月天数动态生成表头

效果图(当前时间2022/3/18,星期五):

代码:
// 表格部分
<el-table
      ref="table"
      :key="tableKey"
      v-loading="listLoading"
      :empty-text="emptyText"
      :data="list"
      border
      fit
    >
      <el-table-column v-for="(item,index) in formThead" :key="index" :prop="item.key" :label="item.label"> // 动态表格
        <el-table-column :label="item.weekName" /> // 生成第二行,对应日期的星期几
      </el-table-column>
</el-table>

// js部分
<script>
export default {
  name: 'Detail',
  components: { },
  data() {
    return {
      listLoading: false,
      tableKey: 0,
      emptyText: '暂无数据',
      formThead: null,
      dayList: [],
      list: []
    }
  },
  computed: {
  },
  mounted() {
    this.formThead = [ // 固定列
      { label: '班级', key: '$index', width: '50', minWidth: '10%', fn: undefined },
      { label: '日期', key: 'createTime', width: '', minWidth: '5%', fn: undefined }
    ]
    this.setDayList()
  },
  methods: {
    setDayList() { // 动态添加天数及对应星期几
      let nowDate = new Date(Date.parse(new Date()))
      let nowDay = nowDate.getDate()
      let weekDay = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      for (let i = 1; i <= nowDay; i++) {
        let firstDate = new Date(Date.parse(new Date()))
        firstDate.setDate(i)
        let dayNum = { label: i, key: 'createTime', width: '', minWidth: '5%', weekName: weekDay[firstDate.getDay()], fn: undefined }
        this.formThead.push(dayNum)
      }
    }
  }
}

</script>

posted @ 2022-03-18 16:00  张三丰学Java  阅读(878)  评论(0编辑  收藏  举报