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.rhkb.cn/news/161220.html

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

相关文章

OJ第四篇

文章目录 链表分割环形链表有效的括号 链表分割 链接: 链表分割 虽然这个题牛客网中只有C,但是无所谓&#xff0c;我们只要知道C是兼容C的就可以了 至于说这个题的思路&#xff0c;我们就弄两个链表&#xff0c;把小于x的结点放到一个链表中&#xff0c;剩下的放到另一个链表…

2023年10月工作经验及问题整理总结

目录 1.window自带的base64加密解密 2.ElementUI修改鼠标移动到表格的背景色 3.vscode保存时几万个eslint错误 4.Git 拉取Gitee仓库报错&#xff1a;“fatal: unable to access ": Failed to connect to 127.0.0.1 port 1080: Connection r... 4.1本地查看Git是否使用…

Java版本spring cloud + spring boot企业电子招投标系统源代码

项目说明 随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大&#xff0c;公司对内部招采管理的提升提出了更高的要求。在企业里建立一个公平、公开、公正的采购环境&#xff0c;最大限度控制采购成本至关重要。符合国家电子招投标法律法规及相关规范&#xff0c;以及审…

spark stream入门案例:netcat准实时处理wordCount(scala 编程)

目录 案例需求 代码 结果 解析 案例需求&#xff1a; 使用netcat工具向9999端口不断的发送数据&#xff0c;通过SparkStreaming读取端口数据并统计不同单词出现的次数 -- 1. Spark从socket中获取数据&#xff1a;一行一行的获取 -- 2. Driver程序执行时&#xff0c…

加固数据安全:Java助力保护Excel文件,让数据无懈可击

摘要&#xff1a;本文由葡萄城技术团队于CSDN原创并首发。转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 前言 Excel文件保护是常用的一种功能&#xff0c;文件保护主要有三种&#xff1a; 添…

单目3D自动标注

这里介绍两种 1. 基于SAM的点云标注 Seal&#xff1a;是一个多功能的自监督学习框架&#xff0c;能够通过利用视觉基础模型的现成知识和2D-3D的时空约束分割自动驾驶数据集点云 Scalability&#xff1a;可拓展性强&#xff0c;视觉基础模型蒸馏到点云中&#xff0c;避免2D和…

SaaS人力资源管理系统的Bug

SaaS人力资源管理系统的Bug Bug1【18】 这里我是直接把代码复制过来的&#xff0c;然后就有一个空白 这是因为它的代码有问题&#xff0c;原本的代码如下所示 <el-table-column fixed type"index" label"序号" width"50"></el-table…

Linux性能优化--性能追踪:受CPU限制的应用程序(GIMP)

10.0 概述 本章包含了一个例子&#xff1a;如何用Linux性能工具在受CPU限制的应用程序中寻找并修复性能问题。 阅读本章后&#xff0c;你将能够&#xff1a; 在受CPU限制的应用程序中明确所有的CPU被哪些源代码行使用。用1trace和oprofile弄清楚应用程序调用各种内部与外部函…

KNN-近邻算法 及 模型的选择与调优(facebook签到地点预测)

什么是K-近邻算法&#xff08;K Nearest Neighbors&#xff09; 1、K-近邻算法(KNN) 1.1 定义 如果一个样本在特征空间中的k个最相似(即特征空间中最邻近)的样本中的大多数属于某一个类别&#xff0c;则该样本也属于这个类别。 来源&#xff1a;KNN算法最早是由Cover和Hart提…

【JVM面试】从JDK7 到 JDK8, JVM为啥用元空间替换永久代?

系列文章目录 【JVM系列】第一章 运行时数据区 【面试】第二章 从JDK7 到 JDK8, JVM为啥用元空间替换永久代&#xff1f; 大家好&#xff0c;我是青花。拥有多项发明专利&#xff08;都是关于商品、广告等推荐产品&#xff09;。对广告、Web全栈以及Java生态微服务拥有自己独到…

VSS、VDD、VBAT、VSSA

引言 在学习设计TM32时&#xff0c;发现芯片除了GPIO引脚外还会引出许多引脚&#xff0c;以STM32F407ZGT6为例除了GPIO引脚还会有以下引脚 如VSS、VDD、VBAT、VSSA、NRST、VREF、VDDA、VCAP_1、VCAP_2、PDR_ON这些引脚。他们有何作用&#xff0c;电路设计中应如何连接&#x…

迅为RK3588开发板使用RKNN-Toolkit-lite2运行测试程序

1 首先也需要部署运行环境&#xff0c;将库文件放入 RK3588 开发板上&#xff0c;我们将网盘资料“iTOP-3588 开发 板 \02_ 【 iTOP-RK3588 开 发 板 】 开 发 资 料 \12_NPU 使 用 配 套 资 料 \05_Linux_librknn_api\librknn_api\aarch64”路径下的文件通过U盘拷贝到开发板的…

LLM-RAG-WEB 大模型+文件+可视化界面

注意&#xff1a;这里只是简单实现了功能和界面&#xff0c;文件对话也暂时只支持一个文件&#xff0c;如果跳到模型对话再切换回文件对话会文件会删除重置会话&#xff0c;但模型对话切换回来时保留之前会话的。 1、代码&#xff08;使用步骤说明在链接里&#xff09; 参考下…

SQLite4Unity3d安卓 在手机上创建sqlite失败解决

总结 要在Unity上运行一次出现库&#xff0c;再打包进APK内 问题 使用示例代码的创建库 var dbPath string.Format("Assets/StreamingAssets/{0}", DatabaseName); #else// check if file exists in Application.persistentDataPathvar filepath string.Format…

Wireshark新手小白基础使用方法

一、针对IP抓取 1、过滤格式&#xff1a; &#xff08;1&#xff09;、ip.src eq x.x.x.x &#xff08;2&#xff09;、ip.dst eq x.x.x.x &#xff08;3&#xff09;ip.src eq x.x.x.x or ip.dst eq x.x.x.x 二、针对端口过滤 1、过滤格式&#xff1a; &#xff08;1&a…

百度智能云千帆大模型平台 2.0 产品技术解析

本文整理自 2023 年 9 月 5 日百度云智大会 - 智能计算&大模型技术分论坛&#xff0c;百度智能云 AI &大数据平台总经理忻舟的主题演讲《百度智能云千帆大模型平台 2.0 产品技术解析》。 这是关于技术主题的论坛&#xff0c;我首先问大家三个开发者的小问题。 第一个问…

如何使用RockPlus MES系统帮助SMT行业实现降本增效

SMT&#xff08;Surface Mount Technology&#xff09;是现代电子行业中主要的组装技术&#xff0c;广泛应用于电子产品的生产。SMT工艺涵盖了锡膏印刷、元器件贴装和回流焊接。经过这些关键工序&#xff0c;元器件被精确固定在电路板上&#xff0c;完成一个电子产品组装。 SM…

SpringCloud: feign整合sentinel实现降级

一、加依赖&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache…

excel+requests管理测试用例接口自动化框架

背景&#xff1a; 某项目有多个接口&#xff0c;之前使用的unittest框架来管理测试用例&#xff0c;将每个接口的用例封装成一个py文件&#xff0c;接口有数据或者字段变动后&#xff0c;需要去每个py文件中找出变动的接口测试用例&#xff0c;维护起来不方便&#xff0c;为了…

Spring AOP归纳与总结

前言 AOP的核心思想是面向切面编程。AOP规范定义了多种概念&#xff0c;常用的aop框架有spring aop和AspectJ&#xff0c;两者功能和性能差异较大&#xff0c;现在默认的AOP框架是AspectJ&#xff0c;下面逐渐归纳其相关概念、功能及实现原理。 1. 概念 1. 切面&#xff1a;…