大淘客网站是怎么做的,四川网站建设找珊瑚云,dede网站微信分享封面,在线字体设计网站写在前面
日期限制处理#xff08;禁用#xff09;#xff0c;下面我以我这边的需求为例#xff0c;
选择的年份需等于或小于当前年份 选择的年份范围必须在三年之内
1.限制起始日期小于截止日期 1#xff09;根据用户选中的开始日期#xff0c;置灰不可选的日期范围禁用下面我以我这边的需求为例
选择的年份需等于或小于当前年份 选择的年份范围必须在三年之内
1.限制起始日期小于截止日期 1根据用户选中的开始日期置灰不可选的日期范围
2如果用户先选择截止日期再选择的开始日期且开始日期大于截止日期清空截止日期 div classmin-wid data-flex-start span classwith-hide年/spanspan classwith-d with-s年/spandiv classyear-range-pickerel-date-pickerv-modeldateList[0]:picker-optionsstartDatePickertypeyearplaceholder选择开始年sizeminiclassyear-pickerformatyyyyvalue-formatyyyychangehandleDateChange/span classrange-word 至 /spanel-date-picker:keyrandomKey v-modeldateList[1]:picker-optionsendDatePicker:default-valuedateDefaultShowtypeyearplaceholder选择结束年sizeminiclassyear-pickervalue-formatyyyy//div/divdata() {return {randomKey: 0,startDatePicker: this.beginDate(),endDatePicker: this.processDate(),dateDefaultShow: , // 日期选择器的日期默到选择的年份datatimeStr: {dateBegin: ,endDataDate: },minNowDate: ,maxNowDate: ,dateList: [, ]}}methods: {// 获取日期 disabledDate 函数用于定义哪些日期应该被禁用。禁止选择大于特定日期的日期。// 选择年份范围选择时开始时间不能大于结束时间结束时间不能小于开始时间// 提出开始时间必须小于提出结束时间beginDate() {const self thisreturn {disabledDate(time) {if (self.dateList[1] ! ) {const fixedTime new Date(time)return fixedTime.getFullYear() self.dateList[1]}}}},// 提出结束时间必须大于提出开始时间processDate() {const self thisreturn {disabledDate(time) {if (self.dateList[0] ! ) {const fixedTime new Date(time)if ((Number(self.maxNowDate) - Number(self.dateList[0])) 2) {return fixedTime.getFullYear() self.maxNowDate || fixedTime.getFullYear() self.dateList[0]} else {return fixedTime.getFullYear() (self.maxNowDate - (Number(self.maxNowDate) - Number(self.dateList[0])) 2) || fixedTime.getFullYear() self.dateList[0]}}}}},// 获取最大日期getMaxDate() {getDataDate().then(res {// 默认结束年为有数据的最近年默认开始年为默认结束年-2即默认时间范围为3年this.maxNowDate res.slice(0, 4)this.minNowDate this.maxNowDate - 2this.dateList[0] this.minNowDate.toString()this.dateList[1] this.maxNowDate// 强制刷新this.$forceUpdate()}).catch(err {console.log(err)})},// 当开始日期改变时的处理函数// 如果截止日期早于开始日期3年以上将截止日期清空handleDateChange() {// 当选择的开始日期比结束日期早三年以上时清空结束日期if (this.dateList[1] - 2 this.dateList[0]) {this.dateList[1] // 改变数组内的值强制刷新清空结束日期的显示this.randomKey Math.random()}// 日期选择器定位到选择的开始年份this.dateDefaultShow this.dateList[0]}}style scoped/* 顶部样式 */.card-head{padding:12px 16px;background-color: #fff;position:relative;}/* 数据日期字体样式 */.date-font{color: var(---Gray-6, #78808F);font-family: PingFang SC;font-size: 12px;font-style: normal;font-weight: 400;line-height: 20px; /* 166.667% */}/*弹性布局两端对齐 */.data-flex-sabw{display: flex;flex-direction: row;justify-content: space-between;align-items: center;}/* 弹性布局左对齐*/.data-flex-start {display: flex;flex-direction: row;justify-content: flex-start;align-items: center;}/* 弹性布局右对齐*/.data-flex-end {display: flex;flex-direction: row;justify-content: flex-end;align-items: center;}.tp-con{width: 100%;height: 56px;box-sizing: border-box;display: flex;padding: 12px 0px;align-items: flex-start;gap: 20px;}/*隐藏显示占位*/.with-hide {opacity: 0;color: var(---Neutral-8, #292929);font-family: PingFang SC;font-size: 14px;font-style: normal;font-weight: 400;line-height: 22px; /* 157.143% */}.with-d {width: 24px;}.with-t {width: 80px;}.with-l {width: 38px;}.with-s {box-sizing: border-box;padding-right: 8px;color: var(---Neutral-8, #292929);text-align: right;font-family: PingFang SC;font-size: 14px;font-style: normal;font-weight: 400;line-height: 22px; /* 157.143% */}.st_line {box-sizing: border-box;margin: 0 2px;width: 9px;height: 22px;color: var(---Gray-6, #78808F);text-align: center;font-family: PingFang SC;font-size: 14px;font-style: normal;font-weight: 400;line-height: 22px; /* 157.143% */}.min-wid{min-width:160px;}.query-bt {background-color: #00B0B0;color: #FFF;outline: none;}.center-deep{hight: 100%;width: 100%;background-color: #fff;margin-top: 16px;}/deep/ .treeselect-main {width: 204px;line-height: 28px;}/deep/ .vue-treeselect__placeholder {line-height: 28px;}/deep/ .vue-treeselect__control {height: 32px !important;line-height: 32px;border-radius: 4px;}/deep/.vue-treeselect__single-value {font-size: 14px;top: 0%;color: #606266;font-weight: 400;}/deep/.vue-treeselect__input {height: 32px;line-height: 32px;}/*顶部筛选器输入框宽度*//deep/.el-select el-select--small,el-input el-input--small el-input--suffix{width: 100% !important;flex: 1;}/*年范围选择器*/.year-range-picker {color: black;text-align: center;border: 1px solid #dcdfe6;border-radius:4px;line-height: 32px;overflow: hidden;display: flex;margin: 4px 0;}/deep/.el-input--mini .el-input__inner {height: 32px;line-height: 32px;border: none}.range-word {box-sizing: border-box;padding-top: 6px;color: var(---Neutral-8, #292929);text-align: right;font-family: PingFang SC;font-size: 14px;font-style: normal;font-weight: 400;line-height: 22px;}.year-range-picker .year-picker {max-width: 150px;margin:0;}
/stylev-for里面数据层次太多或者套的组件层级太多 数据变了页面没有重新渲染需手动强制刷新。
解决方法运用 this.$forceUpdate()强制刷新
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件而不是所有子组件。
知识点vue $forceUpdate() 强制重新渲染及四种方案对比
Vue的双向绑定属于自动档在特定的情况下需要手动触发“刷新”操作目前有四种方案可以选择
刷新整个页面最low的可以借助route机制不推荐 使用v-if标记比较low的有时候不生效不推荐 使用内置的forceUpdate方法较好的 使用key-changing优化组件最好的 vue $forceUpdate() 强制重新渲染及四种方案对比
参考文章
ElementUI 年份范围选择器 el-year-picker 点开是关联的组件-基于element-ui的年份范围选择器 vue中element-ui日期选择组件el-date-picker 清空所选时间会将model绑定的值设置为null 问题 及 限制起止日期范围 vue elementui时间控件单框同时选范围选择周季年。 element ui datepicker时间控件实现范围选择周季年。 ElementUI年份范围选择器功能实现 element ui的日期选择器动态设定年份,并默认显示在该年份范围的日期时间 vue2、vue3中使用$forceUpdate()
写在最后 希望我的分享能够帮助到更多的人如果觉得我的分享有帮助的话请大家一键三连支持一下哦~ ❤️原创不易期待你的关注与支持~ 点赞收藏⭐️评论✍️ 之后我会继续更新前端学习小知识关注我不迷路~
