一、需要来源
一个需求，需要在列表里面的按钮点击弹窗日期选择，然后disable指定的日期间值。话不多说，先上效果图
Note：这个在网上找方案的时候，因为这个是有很多的限制存在，并且，点击提交需要选择月份之后进行事件的触发，如果当当以行数据指定的话，无法进行触发，当然解决方案也很简单，就是改变存储值，变成一个数组，然后在查询的时候，保存了对应的数据，然后通过scope.$index进行下标寻值然后高亮显示月份，但点击月份的时候，会自动赋值给数组0，然后取值直接取，然后处理完成数据之后，直接再次查询即可重新覆盖。
上面只是其一，其二刚刚开始改的时候，尝试很多方法，代码也不是原版，但是上面图的效果用下面代码是可以实现出来的，最后一点还是:picker-options 把对象变成一个方法，然后在方法里面返回一个对象，从而解决自定义disable区块，从而在当前日期上可以做扩展，下面会贴一些借鉴网址。
下面附上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)"
></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/ 指定不显示，还未解决。
借鉴网址：
