一、需要来源

一个需求，需要在列表里面的按钮点击弹窗日期选择，然后disable指定的日期间值。

话不多说，先上效果图

elementUI TimePicker用法_数组

Note：这个在网上找方案的时候，因为这个是有很多的限制存在，并且，点击提交需要选择月份之后进行事件的触发，如果当当以行数据指定的话，无法进行触发，当然解决方案也很简单，就是改变存储值，变成一个数组，然后在查询的时候，保存了对应的数据，然后通过scope.$index进行下标寻值然后高亮显示月份，但点击月份的时候，会自动赋值给数组0，然后取值直接取，然后处理完成数据之后，直接再次查询即可重新覆盖。

上面只是其一，其二刚刚开始改的时候，尝试很多方法，代码也不是原版，但是上面图的效果用下面代码是可以实现出来的，最后一点还是:picker-options

下面附上element官网 Picker Options

参数

说明

类型

可选值

默认值

shortcuts

设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表

Object[]



disabledDate

设置禁用状态，参数为当前日期，要求返回 Boolean

Function



cellClassName

设置日期的 className

Function(Date)



firstDayOfWeek

周起始日

Number



onPick

选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效

Function({ maxDate, minDate })



这个是完整代码

<template>
    <div>
    <el-table :data="tableData" style="width:400px;height:200px;">
        <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
        <el-table-column label="操作" min-width="100" >
            <template slot-scope="scope">
              <el-button class="month_export" type="text" size="">
                提交 
                <el-date-picker
                  type="month"
                  v-model="queryForm.month[scope.$index]"
                  value-format="yyyyMM"
                  :picker-options="expireTimeOption(scope.row)"
                  @change="onEdit(scope.row)" //重复值不会触发，可以使用blur进行，但是也要做判断，这里我想到的一个方向是watch
                ></el-date-picker>
            </el-button>
            </template>
        </el-table-column>
    </el-table>
   </div>
</template>

<script>
export default {
  name:"App",
  components: {
  },
  data () {
		return {
     expireTimeOption(row) {
       let _this = this;
       return {
         disabledDate(time) { //这里根据element官方定义的、该字段是一个对象
            return _this.dealDisableDate(time,row.date);
         }
       }
     },
    queryForm:{
      month:["202203","202204"],//没有提供查询，但是效果一样
    },
    tableData: [{ 
            date: '2022-03-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2022-03-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2022-03-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2022-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
    }]
   }
  },
methods: {
  dealDisableDate(time,times){ //第一个是默认自带的、第二个就是自己限制值
    return time.getTime() < new Date(times); // 第二个可以根据自己需求选中至灰的阶段 
  },
  onEdit(row) {
    //执行自己的操作
  } 
}

}
</script>

<style lang="less" scoped>
  .month_export{
    border: none;
    position: relative !important;
  }
  .month_export .el-date-editor{
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    opacity: 0;
  }

 /deep/ .el-month-table td.today .cell {
      color: #131416 !important;
      font-weight: 700;
  }

</style>

 最后总结一下，默认高亮显示当前月份这个 用该 /deep/ 指定不显示，还未解决。