1，前言
项目迭代过程中，碰上一个需求，table表格，其中一列计划开始时间一列计划结束时间，使用的是不同的日期选择器，开始时间会限制结束时间只能选相同日期以及之后的日期，反之结束时间也如此。项目用的是elementUi的Table组件，记录一下在Table中怎么写日期选择器DatePicker的picker-options。
表格
2，代码背景
vue.js版本2.x
element版本2.15.2
博主这边的数据格式是开始时间是一个字段，结束时间也是一个字段。post数据格式类似于
res.data = {
begin_date:'2021-01-01',
end_date:'2021-06-28'
}
DatePicker组件的日期禁止利用的是disabledDate这个字段，它返回一个Boolean值
DatePicker组件参数说明
3，上代码
HTML部分
<el-table
:data="dataList"
style="width: 100%"
row-key="node_id"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
default-expand-all
>
<el-table-column label="计划开始日期" width="200">
<template slot-scope="scope">
<el-date-picker
width="180"
v-model="scope.row.begin_date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择开始日期"
:disabled="(nowTemplateStatus !=='草稿' && pageStatus !=='add')"
:picker-options="banStartTime(scope.row.end_date)"
>
</el-date-picker>
</template>
</el-table-column>
<el-table-column label="计划完成日期" width="200">
<template slot-scope="scope">
<el-date-picker
width="180"
v-model="scope.row.end_date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择结束时间"
:disabled="(nowTemplateStatus !=='草稿' && pageStatus !=='add')"
:picker-options="banEndTime(scope.row.begin_date)"
>
</el-date-picker>
</template>
</el-table-column>
</el-table>
methods部分
// 开始时间禁止
banStartTime(now) {
let obj
if (now) {
obj = {
disabledDate(time) {
let date = new Date(now).getTime()
return time.getTime() > date
}
}
} else {
obj = {
disabledDate(time) {
return false
}
}
}
return obj
},
// 结束时间禁止
banEndTime(now) {
let day = 24 * 3600 * 1000
let obj
if (now) {
obj = {
disabledDate(time) {
return time.getTime() < (new Date(now).getTime() - day)
}
}
} else {
obj = {
disabledDate(time) {
return false
}
}
}
return obj
}
如果看了觉得有帮助的，我是@鹏多多11997110103，欢迎 点赞 关注 评论；
END
往期文章
- 细数JS中实用且强大的操作符&运算符
- javaScript中try和catch的使用和跳出forEach循环
- 使用nvm管理node.js版本以及更换npm淘宝镜像源
- vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
- 微信小程序实现搜索关键词高亮
个人主页
