西宁网站建设嘉荐君博l,学外贸英语的网站,网站建设报告 宣传,网站建设实习收获基于el-date-picker 处理满足项目需求。#xff08;#xff1a;最多选择7天#xff09; 效果#xff1a; 1 大于当前时间的以后日期禁选。2 选中时间的前后七天可选 #xff08;最多可查询7天数据#xff09;3 templatesection classwarning-contai…基于el-date-picker 处理满足项目需求。最多选择7天 效果 1 大于当前时间的以后日期禁选。2 选中时间的前后七天可选 最多可查询7天数据3 templatesection classwarning-containerheader classquery-headel-form :inlinetrue classquery-formdivel-form-item label日期选择 label-width120pxel-date-pickerv-modeldaterangeBizOccurDatetypedaterange:clearabletruerange-separator至start-placeholder开始日期end-placeholder结束日期:picker-optionspickerOptionsvalue-formatyyyy-MM-ddchangeonLoad/el-date-picker/el-form-itemel-form-item label label-width30pxspan stylecolor: #aaa提示最多可查询7天数据/span/el-form-item/div/el-form/header/section /templatescriptexport default {props: {},data () {return {daterangeBizOccurDate: [],maxDate: new Date(),selectData: ,pickerOptions: {disabledDate: (time) {if (this.selectData) {const maxDurationTem 6 * 24 * 3600 * 1000return time.getTime() this.maxDate|| time.getTime() this.selectData maxDurationTem|| time.getTime() this.selectData - maxDurationTem} else {return time.getTime() this.maxDate}},onPick: ({ maxDate, minDate }) {this.selectData minDate.getTime()if (maxDate) {// 第二次点击日期选择器选好初始时间和结束时间后解除禁用限制this.selectData }}}}},watch: {},mounted () {this.defaultDate()},methods: {defaultDate (){// 初始化时默认当前时间let sTime window.$dayjs(new Date()).format(YYYY-MM-DD)let eTime window.$dayjs(new Date()).format(YYYY-MM-DD)// startTime: window.$dayjs().format(YYYY-MM-DD 00:00:00),// endTime: window.$dayjs().add(1, day).format(YYYY-MM-DD 00:00:00)this.daterangeBizOccurDate [new Date(sTime), new Date(eTime)] // 显示的默认时间},onLoad (val) {// 时间改变时推送事件给父组件进行调用处理this.$emit(selectDay7, val)}} } /scriptstyle langscss scoped ::v-deep {.el-date-editor .el-range-separator {width: 8%;}.el-table {min-height: 200px;.el-table__cell {padding: 0;height: 48px;.cell {line-height: 26px;}}.zmj-el-table::before {height: 1px;}}.el-form-item__label {color: #fff;}.el-pagination {display: flex;align-items: center;justify-content: flex-end;padding: 30px 0;.el-pagination__total,.el-pagination__jump {color: #fff;}button, .el-pager li {background: #031e3c;color: #fff;.active {background: #1e4966;}}button:disabled {color: #999;}.el-input .el-input__inner {height: 28px;}}.el-select.query-select {width: 345px;}.el-tag.el-tag--info {background-color: #1A293A;border-color: #43576F;color: #fff; .el-tag__close {color: #8B929B;background-color: #1A293A;}} }.warning-container {// width: 83vw;margin-top:-35px;// margin-left: 200px;// padding-top: 36px;.warning-table-wrap {width: 100%;overflow: hidden;}.warning-type {padding: 2px 8px;border-radius: 3px;.type1 {background: #39131D;border: 1px solid #FF757A;color: #FF757A;}.type2 {background: #4B4510;border: 1px solid #FFE395;color: #FFE395;}.type3 {background: #122E58;border: 1px solid #A2C7FF;color: #A2C7FF;}.type4 {background: #125853;border: 1px solid #A2FFEC;color: #A2FFEC;}} }.query-head {// margin-bottom: 14px; }.query-form {display: flex;justify-content: space-between;::v-deep {.el-form-item:nth-of-type(1) {.el-select.query-select {width: 420px;}}}::v-deep{.el-input__inner .el-range-input{background-color: #061729;color: #FFFFFF;}} } /style