el-tabel根据已有条件形成列或可编辑列表

el-tabel根据已有条件形成列或可编辑列表

一、形成列

功能描述：分为三个类型：日、周、月。默认时间为今天。显示出今天所在的日、周、月的列表。

功能思路：先写出列表，点击三个类型的时侯向列表push。
改变时间的 方法如下：

//当天
const date = dayjs(new Date()).format('YYYY-MM-DD')//2020-10-14
const week = this.getWeek(date)//周三
const newData = week + dayjs(date).format('MM/DD')//周三10/14

//getWeek方法
 getWeek (dateString) {
    
    
      const dateArray = dateString.split('-')
      const date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2])
      return '周' + '日一二三四五六'.charAt(date.getDay())
    },

// 这个月的开始天结束天
const startDay = dayjs(date).startOf('month').$d
const endDay = dayjs(date).endOf('month').$d
// 这个周的开始天结束天
    getStartAndEnd (timestamp) {
    
    
      const oneDayTime = 1000 * 60 * 60 * 24 // 一天里一共的毫秒数
      const today = timestamp ? new Date(timestamp) : new Date()
      const todayDay = today.getDay() || 7 // 若那一天是周末时，则强制赋值为7
      const startDate = new Date(
        today.getTime() - oneDayTime * (todayDay - 1)
      )
      const endDate = new Date(today.getTime() + oneDayTime * (7 - todayDay))
      return {
    
     startDate, endDate }
    },
    // 自定义日期格式
    getMyDate (str) {
    
    
      const oDate = new Date(str)
      const oYear = oDate.getFullYear()
      const oMonth = oDate.getMonth() + 1
      const oDay = oDate.getDate()
      const oTime = oYear + '-' + this.addZero(oMonth) + '-' + this.addZero(oDay)
      return oTime
    },
    addZero (num) {
    
    
      if (parseInt(num) < 10) {
    
    
        num = '0' + num
      }
      return num
    }

其中周和月通过一些方法找到开始和结束天，仿照天进行样式调整 ，需要一个for循环。

二、形成可编辑列

       <el-table :data="tabelData">
          <el-table-column type="index" label="NO." width="50">
          </el-table-column>
          <el-table-column prop="name" label="名称">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.name"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>

//根据选择日期的天数判断tableData

// max 天数
    this.getList(max, this.tabelData, {
    
    
          name: "",
    });
//  getList方法
	getList(value, list, copyObj) {
    
    
		const arr = list.slice(0, +value);
		const length = value - list.length;
		if (length > 0) {
    
    
			Array.from({
    
     length: length }()=>copyObj).forEach((item)=> {
    
    
		arr.push(item);
			});
		}
	}