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

往期文章

个人主页