网站百度百科怎么做,防护网施工方案,移动互联网开发选题,重庆万州网站建设公司电话一、背景
目前做的管理系统项目#xff0c;期望实现功能为#xff1a;设置出账周期和出账日#xff0c;考虑使用element ui下拉框实现功能
二、所用技术
vue2element ui
三、实现效果 四、具体代码
templatepopup-frame :title批量设置出账日 …一、背景
目前做的管理系统项目期望实现功能为设置出账周期和出账日考虑使用element ui下拉框实现功能
二、所用技术
vue2element ui
三、实现效果 四、具体代码
templatepopup-frame :title批量设置出账日 :showBtn[, ] closeclose() refpopupdiv classprint-popdiv classsetting账单生成设置/divel-form refform :modelform label-width80px sizeminidiv styledisplay: flex; align-items: centerel-form-item label出账周期el-select v-modelform.recentMonth changemonthChange placeholder选择月份 stylewidth: 80pxel-option v-foritem in month :keyitem.value :labelitem.label :valueitem.value/el-option/el-selectspan月/span/el-form-itemel-form-item label出账日每个出账月份的第 label-width260pxel-select v-modelform.day placeholder选择天数 stylewidth: 80pxel-option v-foritem in days :keyitem.value :labelitem.label :valueitem.value/el-option!-- 其他日期选项 --/el-selectspan日/span/el-form-item/div!-- 按钮区域 --el-rowel-col :span24 classbtn-containerel-form-itemel-button clickclose()取消/el-buttonel-button typeprimary clickonSubmit确定/el-button/el-form-item/el-col/el-row/el-form/div/popup-frame
/templatescript
export default {name: print-pop,props: {ids: {type: Array,default: () {return []}}},data() {return {//周期/月份month: [],//天数/日days: [],form: {recentMonth: ,day: }}},created() {this.init()},methods: {init() {let myData new Date() //获取当前日期let month myData.getMonth() 1 //获取当前月份let day myData.getDate() //获取当天日期this.initSelectMonth(month) // 调用initSelectMonth方法初始化月份选项this.form.recentMonth month // 将月份设置为当前月份this.monthChange(month) //生成对应月份的天数选项this.form.day day // 将天数设置为当天的日期},//初始化月份选项initSelectMonth(month) {this.month []for (let i 1; i 12; i) {this.month.push({ value: i, label: i })}},//生成对应月份的天数选项monthChange(val) {const month parseInt(val, 10)// 将传入的月份转换为整数const daysInMonth new Date(new Date().getFullYear(), month, 0).getDate()// 获取对应月份的天数const days []for (let i 1; i daysInMonth; i) {days.push({ value: i, label: i })}this.form.day // 清空天数表单项this.days days// 更新天数选项},//确定按钮onSubmit() {this.$emit(close)//用于向父组件发信息关闭弹窗的this.getSaveDate()},//此处为点击确定按钮发请求getSaveDate() {console.log(点击了确认按钮)},close(param) {this.$emit(close, param)}}
}
/scriptstyle langscss scoped
.print-pop {width: fit-content;
}
.setting {margin-bottom: 10px;
}
.btn-container {display: flex;justify-content: flex-end;margin-top: 50px;
}
/style
