Element-UI是饿了么前端团队推出的一款基于Vue。js 2.0的桌面端UI框架,手机端有对应框架是薄荷UI。
需求场景如下:
<李>指定起止日期,后选的将会受到先选的限制李
<李>不同的日期选择器,不过也存在关联关系李
实现方法不难,利用了改变事件,动态改变picker-options中的disableDate即可。
查看演示
模板
& lt;脚本src=" https://www.yisu.com//unpkg.com/vue/dist/vue.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com//unpkg.com/element-ui@2.3.8/lib/index.js”祝辞& lt;/script>
& lt; div id=坝τ谩北?
& lt; template>
& lt; div类="块"比;
& lt;跨类=笆痉丁痹谄鹗既掌? lt;/span>
& lt; el-date-picker v模型=" startDate可以" type="日期"占位符=把≡袢掌凇?picker-options=皃ickerOptionsStart @change”=癱hangeEnd”比;
& lt;/el-date-picker>
& lt;/div>
& lt; div类="块"比;
& lt;跨类=笆痉丁弊４墙刂谷掌? lt;/span>
& lt; el-date-picker v模型=" endDate " type="日期"占位符=把≡袢掌凇?picker-options=皃ickerOptionsEnd @change”=癱hangeStart”比;
& lt;/el-date-picker>
& lt;/div>
& lt;/template>
& lt;/div>
之前
脚本
主要var={
数据(){
返回{
pickerOptionsStart: {},
pickerOptionsEnd: {},
startDate可以:”,
endDate:”,
};
},
方法:{
changeStart () {
这一点。this.pickerOptionsStart pickerOptionsStart=Object.assign ({}, {
disabledDate:(时间)=比;｛
在返回time.getTime ();this.endDate
}
}）
},
changeEnd () {
这一点。this.pickerOptionsEnd pickerOptionsEnd=Object.assign ({}, {
disabledDate:(时间)=比;｛
返回time.getTime () & lt;this.startDate
}
}）
}
}
};
var男星=Vue.extend(主要)
新男星()。美元山(“#应用”)
之前
风格
@ import url (//unpkg.com/element-ui@2.3.8/lib/theme-chalk/index.css”);
.block {
margin-top: 10 px;
}
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
