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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM