vue + element 企业级项目中 动态制作table表头

动态制作table表头

1.vue 页面

<el-table
      class="am-margin-top"
      v-loading="loading"
      size="mini"
      :data="tableList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      
      <el-table-column
        label="人员名称"
        align="center"
        prop="userName"
        min-width="120px"
      />
      <el-table-column
        v-for="(items,index) in tableTitleList "
        :key="index"
        :label="items.label"
        align="center"
        :prop="items.label"
        min-width="120px"
      >
        <template slot-scope="scope">
          <span>{{scope.row.classesList[items.label] || ''}}</span>
        </template>
      </el-table-column>
    </el-table>

2.数据

 	// 列表数据
    tableList: [],
    // 表头数据
    tableTitleList: [],

3.方法

 /** 获取时间 年 月*/
    getYearMonth () {
      var myDate = new Date()
      var y = myDate.getFullYear()
      var m = myDate.getMonth() + 1
      this.queryParams.workDeta = y + '-' + m
      this.queryParams.workYear = y
      this.queryParams.workMonth = m
      this.getList()
    },
    /** 设置 表头 */
    getDateNum () {
      let y = this.queryParams.workYear
      let m = this.queryParams.workMonth - 1
      let myDate = new Date(y, m + 1, 0)
      let dateNum = myDate.getDate()
      this.tableTitleList = []
      for (let i = 1; i < dateNum + 1; i++) {
        let obj = {}
        let days = new Date(y, m, i).getDay()
        let w = this.getWeek(days)
        obj.label = this.queryParams.workMonth + '-' + i + ' ' + w
        this.tableTitleList.push(obj)
      }
    },
    /** 获取 周 */
    getWeek (day) {
      let week = ''
      switch (day) {
        case 1:
          week = '星期一'
          break
        case 2:
          week = '星期二'
          break
        case 3:
          week = '星期三'
          break
        case 4:
          week = '星期四'
          break
        case 5:
          week = '星期五'
          break
        case 6:
          week = '星期六'
          break
        case 0:
          week = '星期日'
          break
      }
      return week
    },
    /** 查询 列表 */
    getList () {
      this.getDateNum()
      this.loading = true
      frequencyList(this.queryParams).then((response) => {
        this.loading = false
        this.total = response.data.total
        this.tableList = response.data.rows
      })
    },

动态表头,实现方式有很多种
这个要根据后端传递的数据格式

data: {
	total: 3
	rows: [
		{ 
		classesList: {
			5-25 星期二: null
			5-26 星期三: "中班"
			5-27 星期四: "中班"
			5-28 星期五: "早班"
			5-29 星期六: "早班"
			5-30 星期日: "早班"
			5-31 星期一: "早班"
			6-1 星期二: "早班"
			6-2 星期三: "早班"
			6-3 星期四: "早班"
			6-4 星期五: "早班"
			6-5 星期六: "早班"
			6-6 星期日: "早班"
			}
			userId: "5011b971264a4e98a8"
			userName: "ceshi2019"
		}
		{...}
	]
}

不是很难。

这个只是对数据的处理
对前端页面性能不是很友好哦

但希望能帮助到需要帮助的小伙伴.
加 油！
奥 利 给！