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);
});
}
}