element ui 下拉框 选择月份和天数

一、背景

目前做的管理系统项目,期望实现功能为:设置出账周期和出账日,考虑使用element ui下拉框实现功能

二、所用技术

vue2+element ui

三、实现效果

四、具体代码

<template><popup-frame :title="`批量设置出账日`" :showBtn="['', '']" @close="close()" ref="popup"><div class="print-pop"><div class="setting">账单生成设置</div><el-form ref="form" :model="form" label-width="80px" size="mini"><div style="display: flex; align-items: center"><el-form-item label="出账周期"><el-select v-model="form.recentMonth" @change="monthChange" placeholder="选择月份" style="width: 80px"><el-option v-for="item in month" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select><span>月</span></el-form-item><el-form-item label="出账日:每个出账月份的第" label-width="260px"><el-select v-model="form.day" placeholder="选择天数" style="width: 80px"><el-option v-for="item in days" :key="item.value" :label="item.label" :value="item.value"></el-option><!-- 其他日期选项 --></el-select><span>日</span></el-form-item></div><!-- 按钮区域 --><el-row><el-col :span="24" class="btn-container"><el-form-item><el-button @click="close()">取消</el-button><el-button type="primary" @click="onSubmit">确定</el-button></el-form-item></el-col></el-row></el-form></div></popup-frame>
</template><script>
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)}}
}
</script><style lang="scss" scoped>
.print-pop {width: fit-content;
}
.setting {margin-bottom: 10px;
}
.btn-container {display: flex;justify-content: flex-end;margin-top: 50px;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/113487.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Leetcode—2530.执行K次操作后的最大分数【中等】(C语言向上取整数学公式)

2023每日刷题&#xff08;五&#xff09; Leetcode—2530.执行K次操作后的最大分数 向上取整思想 参考了这篇文章 有人肯定会问&#xff0c;这个向上取整为什么是这样来的。接下来我简单讲解一下。 数学式&#xff1a; x y 数学式&#xff1a;\frac{x}{y} 数学式&#xff1a…

配置Linux

首先安装VMware&#xff1a; 安装说明&#xff1a;&#xff08;含许可证的key&#xff09; https://mp.weixin.qq.com/s/XE-BmeKHlhfiRA1bkNHTtg 给大家提供了VMware Workstation Pro16&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1q8VE3TkPzDnM3u9bkTdA_g 提取码&…

文件的物理结构(连续分配,链接分配,索引分配)

1.文件块&#xff0c;磁盘块 类似于内存分页&#xff0c;磁盘中的存储单元也会被分为一个个“块/磁盘块/物理块”。 很多操作系统中&#xff0c;磁盘块的大小与内存块、页面的大小相同。 内存与磁盘之间的数据交换&#xff08;即读/写操作、磁盘I/O&#xff09;都是以“块”为…

详细解读DALLE 3技术报告:Improving Image Generation with Better Captions

Diffusion models代码解读&#xff1a;入门与实战 前言&#xff1a;OpenAI是推动大模型创新的领头羊&#xff0c;最近发布的DALLE 3凭借着远超市面上其他图片生成模型的表现&#xff0c;再次火出圈。最近OpenAI官方发布了DALLE 3的技术报告《Improving Image Generation with B…

后缀表达式求值

题目要求: 后缀表达式求值&#xff1a;建立一个操作数栈S。然后从左到右读表达式&#xff0c;如果读到操作数就将它压入栈S中&#xff0c;如果读到n元运算符(即需要参数个数为n的运算符)则取出由栈顶向下的n项操作数进行运算&#xff0c;再将运算的结果代替原栈顶的n项压入栈中…

Catalan 数 和 Stirling 数

这个也可以理解为栈&#xff0c;用 ( 表示 入栈 &#xff0c; ) 表示出栈 , 任何情况下表示入栈的 ( 都必须大于等于 ) 的个数 这个思路和入栈出栈的思路是等价的

ms-sql server sql 把逗号分隔的字符串分开

案例&#xff1a; sql 查询-字段里是逗号,分隔开的数组&#xff0c;查询匹配数据 sql 查询-字段里是逗号,分隔开的数组&#xff0c;查询匹配数据_sql server 数组匹配-CSDN博客 SQL SERVER 把逗号隔开的字符串拆分成行 SQL SERVER 把逗号隔开的字符串拆分成行_sqlserver拆分…

【暴力剪枝】CF1708D

https://codeforces.com/contest/1708/problem/D 题意 思路 这样的操作下&#xff0c;数列减的速度是非常快的&#xff0c;也就是说&#xff0c;易出现很多的0&#xff0c;0的操作没啥意义&#xff0c;所以我们要找到第一个 >0 的数对其后的序列进行排序&#xff0c;就能大…

【Edabit 算法 ★☆☆☆☆☆】Power Calculator

【Edabit 算法 ★☆☆☆☆☆】Power Calculator math numbers Instructions Create a function that takes voltage and current and returns the calculated power. Examples circuitPower(230, 10) // 2300 circuitPower(110, 3) // 330 circuitPower(480, 20) // 9600Not…

大数据平台开发经验

如果我是一个有着10年大数据平台开发经验的开发者&#xff0c;面试时可能需要准备以下知识 大数据生态系统&#xff1a;** 熟悉大数据技术栈&#xff0c;如Hadoop、Spark、Flink等&#xff0c;了解它们的原理、用途和优劣势。 分布式系统设计&#xff1a; 深入了解分布式系统的…

java项目运行时信息获取

大体思路如下&#xff0c;想要获取启动时处理器数量、jvm 相关信息&#xff0c;操作系统信息、运行机器信息 运行机器信息 import org.slf4j.Logger; import org.slf4j.LoggerFactory;import java.lang.invoke.MethodHandles;/*** 机器工具类*/ public abstract class ServerU…

051校园短期闲置资源置换平台

大家好✌&#xff01;我是CZ淡陌。一名专注以理论为基础实战为主的技术博主&#xff0c;将再这里为大家分享优质的实战项目&#xff0c;本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路…

git第一次推送出现推送被拒绝

前言 git 第一次推送出现以下错误 ! [rejected] master -> master (fetch first) error: failed to push some refs to ‘https://gitee.com/fengshangyunwang/iot-front-end.git’ hint: Updates were rejected because the remote contains work that you do hint: not …

Mac硬盘检测工具

Mac硬盘检测软件是一款用于检测和诊断Mac硬盘健康状态的工具&#xff0c;帮助用户及时发现潜在的硬盘问题&#xff0c;避免数据丢失和系统故障。通过全面的检测和报告功能&#xff0c;用户可以更好地了解自己的硬盘状况&#xff0c;确保数据的安全和可靠。给大家介绍几款好用的…

数字秒表VHDL启动暂停清零,源码和视频

名称&#xff1a;数字秒表VHDL启动暂停清零&#xff08;代码在文末付费下载&#xff09; 软件&#xff1a;Quartus 语言&#xff1a;VHDL 代码功能&#xff1a; 数字秒表 使用VHDL语言设置数字秒表。要求具有百分秒、秒和分钟显示,百分秒范围00-99,秒范围00-59,分钟范围0…

CMakeList 编写示例

cmake_minimum_required(VERSION 3.8) #指定cmake的最小版本 set(PROJECT_NAME Untitled_1) #初始化变量 project(${PROJECT_NAME} VERSION 1.0) #创建一个project set(CMAKE_AUTOMOC ON) #初始化内置变量, 该变量为Qt工程专属变量 set(CMAKE_AUTORCC ON) set(CMAKE_A…

【Python 千题 —— 基础篇】分割有效信息

题目描述 题目描述 有时候我们需要截取字符串以获取有用的信息&#xff0c;比如对于字符串 “日期&#xff1a;2010-10-29”&#xff0c;我们需要截取后面的 10 个字符来获取日期&#xff0c;以便进行进一步分析。编写一个程序&#xff0c;输入一个字符串&#xff0c;然后输出…

git仓删除当前仓且保留嵌套子仓--类似保留特定文件目录

当前git若有损坏需删除重新下载&#xff0c;但其还含有子仓&#xff0c;不能直接删除整体目录。清理方法如下&#xff1a; 分如下两种场景 1、若是子仓当前没有进行任何操作&#xff0c;即子仓可以临时移动 这种比较简单&#xff0c;分如下几步&#xff1a; step1:找到全部子…

视频播放音画同步处理

一、视频播放流程 播放一个视频&#xff0c;一般分一下几步完成 解复用&#xff08;Demux&#xff09;&#xff1a;在媒体文件中将音频数据、视频数据、字母数据分离出来。 二、播放参数说明 视频帧率&#xff1a;一秒钟需要显示的画面&#xff0c;比如25FPS&#xff0c;意思就…

el-upload实现上传文件夹

背景&#xff1a;如图一所示&#xff0c;最下面有一个黄色上传文件按钮&#xff0c;为手动上传而且上传区域有上传文件和上传文件夹的区分 所以需要在点击了上传文件夹做特殊处理使得el-upload可以上传文件夹 一、template区域 <el-uploadclass"upload-file"dra…