项目迭代过程中，碰上一个需求，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值

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
如果看了觉得有帮助的，我是@上进的鹏多多，欢迎 点赞 关注 评论；

使用nvm管理node.js版本以及更换npm淘宝镜像源

细数JS中实用且强大的操作符&运算符
vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令
微信小程序实现搜索关键词高亮
GitHub