elemento cambia dinámicamente el rango de tiempo opcional de el-date-picker
Al desarrollar proyectos del lado web, a menudo nos encontramos con consultas de datos a través de varias condiciones de filtro de rango de tiempo, y el selector de tiempo de nuestro elemento es el más utilizado. A veces, debido a la demanda, necesitamos agregar un intervalo opcional al control de tiempo. El rango opcional fijo está bien, pero ¿y si es dinámico? Déjame mostrarte mi escenario de aplicación primero.
La imagen de arriba es mi escenario de aplicación. De acuerdo con el año de la izquierda, qué año se selecciona, el intervalo mensual de la derecha solo puede seleccionar el mes dentro de ese año, y el año anterior no se puede seleccionar. Después del año de la izquierda está seleccionado, el de la derecha El intervalo opcional mensual cambia dinámicamente, así que no hablemos del código.
//结构代码块
<el-form-item label="年份">
<el-date-picker
v-model="value3"
type="year"
size="medium"
placeholder="选择年"
></el-date-picker>
</el-form-item>
<el-form-item label="选择月度" >
<el-date-picker
v-model="value4"
type="monthrange"
clearable
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份"
:picker-options="pickerOptions" //这个属性是关键
>
</el-date-picker>
</el-form-item>
El código lógico a continuación
data(){
let disabledDate = (time) => {
//这个关键属性我们一定要写在data的里面并且return的外面，这是动态改变区间的关键
let year = moment(this.value3).format('YYYY')；//根据左边年份的时间获取年
var firstMonth= new Date(+year,1,1);//element的时间控件区间控制是基于js的时间对象来控制的，我们需要转时间对象
firstMonth.setMonth(0);//设置为这一年的第一个月，这里的0是下标
var lastMonth= new Date(+year,1,1);//转时间对象
lastMonth.setMonth(11);//设置为这一年的最后一个月，这里的11是下标
return time.getTime() > new Date(lastMonth) || time.getTime() < new Date(firstMonth)
//这一年的第12月份的以后的月份不能选，这一年1月份之前的月份也不能选
}
return {
value3: moment(new Date()).format("YYYY"),
pickerOptions: {
disabledDate，//上面处理好逻辑扔到这来，和表单自定义校验规则一个套路
},
},
Lo anterior es toda la lógica y el código. Después de esta operación, siento que tengo que mirar bien algunas cosas sobre el objeto de tiempo nativo de js. Jaja, vergonzoso