当前位置: 首页 > news >正文

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>

相关文章:

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

一、背景 目前做的管理系统项目&#xff0c;期望实现功能为&#xff1a;设置出账周期和出账日&#xff0c;考虑使用element ui下拉框实现功能 二、所用技术 vue2element ui 三、实现效果 四、具体代码 <template><popup-frame :title"批量设置出账日" …...

用Java包com.sun.net.httpserver下面的类实现一个简单的http服务器demo

java的com.sun.net.httpserver包下的类提供了一个高层级的http服务器API&#xff0c;可以用来构建内嵌的http服务器。支持http和https。这些API提供了一个RFC 2616 (HTTP 1.1)和RFC 2818 (HTTP over TLS)的部分实现。 https://docs.oracle.com/en/java/javase/19/docs/api/jdk.…...

unity 浏览器插件【embedded browser(原zfbrowser)】简单教程,使unity支持web h5页面,附软件下载链接

一 简介 这是个在项目中使用了很久的浏览器插件。 很负责任的说这是在pc平台上最好用的浏览器插件 商业付费价格78刀&#xff0c;相比3d webview等插件动不动就178、368的价格就显得很良心 最新版下载链接&#xff08;请勿商用&#xff09; 1.1 功能概述 基本和普通浏览器无…...

LeetCode算法位运算—只出现一次的数字

目录 136. 只出现一次的数字 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 代码&#xff1a; 运行结果&#xff1a; 补充 异或的重要性质 136. 只出现一次的数字 - 力扣&#xff08;LeetCode&#xff09; 给你一个 非空 整数数组 nums &#xff0c;除了某…...

vcpkg manifest 的使用

最近项目上要使用 CMakeLists 管理&#xff0c;由于 Windows 版本有依赖到 vcpkg 提供的库&#xff0c;所以需要使用 vcpkg manifest 来统一设置库的版本&#xff0c;方便后续维护 推荐一个文章&#xff0c;介绍的可以说是非常全面了 VCPKG 特性 - Versioning 不过里面也有一些…...

选择什么电容笔比较好?平板手写笔推荐

由于苹果Pencil的热销&#xff0c;让华国内市场上&#xff0c;也出现了不少的平替式电容笔&#xff0c;这些产品&#xff0c;有好有坏&#xff0c;价格也很公道。不过&#xff0c;也有很多产品的价格都很平价。我是一个拥有多年经验的数码发烧友&#xff0c;在前几年就开始用上…...

pdf转二维码怎么做?pdf二维码制作简单技巧

pdf是一种很常见的文件储存格式&#xff0c;一般通知、发票、简历都会保存为这种格式来使用&#xff0c;那么需要将pdf格式文件做成二维码&#xff0c;该用什么方式来制作呢&#xff1f;下面给大家分享一个pdf转二维码的在线工具&#xff0c;可以通过上传文件一键生成二维码&am…...

【CANoe】TX Self-ACK自应答配置与CPAL实现

一、引言 在测试CAN&CANFD通信或者网络管理的时候&#xff0c;我们经常遇到使用报文&#xff08;网络管理报文或者通信报文&#xff09;唤醒被测件这个测试点&#xff0c;如果测试比较多的情况下&#xff0c;我们就会发现&#xff0c;如果CANoe没有接被测件或者被测件没有…...

(Python)MATLAB mat矩阵和Python npy矩阵转换

Python np.ndarray矩阵转换为MATLAB mat文件 import numpy as npimport scipy.io as iomat_path mat_save_pathmat np.zeros([6, 128])io.savemat(mat_path, {name: mat})Python读取MATLAB mat文件 import numpy as np from scipy import iomat io.loadmat(your_mat_file.…...

Flink1.14 SourceReader概念入门讲解与源码解析 (三)

目录 SourceReader 概念 SourceReader 源码方法 void start(); InputStatus pollNext(ReaderOutput output) throws Exception; List snapshotState(long checkpointId); CompletableFuture isAvailable(); void addSplits(List splits); 参考 SourceReader 概念 Sour…...

PS运行中缺失d3dcompiler_47.dll问题的5个有效修复方法总结

在使用ps作图的时候&#xff0c;我们有时会遇到一些问题&#xff0c;其中之一就是“PS运行中缺失d3dcompiler_47.dll”的问题。这个问题可能会导致PS无法正常运行&#xff0c;“d3dcompiler_47.dll”。这是一个动态链接库文件&#xff0c;它是DirectX的一部分&#xff0c;主要负…...

【MATLAB-Retinex图像增强算法的去雾技术】

续&#xff1a;【MATLAB-基于直方图优化的图像去雾技术】 【MATLAB-Retinex图像增强算法的去雾技术】 1 原图2 MATLAB实现代码3 结果图示 参考书籍&#xff1a;计算机视觉与深度学习实战:以MATLAB、Python为工具&#xff0c; 主编&#xff1a;刘衍琦, 詹福宇&#xff0c; 王德建…...

使用 2 个 HSplitView 在 swiftUI 中创建一个 3 窗格界面

Pet*_*ter 8 嗯&#xff0c;我会的。在断断续续地挣扎了几个星期之后&#xff0c;在我问这个问题一个小时后&#xff0c;我似乎解决了它&#xff01;只需将第二个 HSplitView 的 layoutPriority 设置为 1&#xff0c;并将中心视图也设置为 1。当你想到它时是有道理的&#xff1…...

【C++ 操作符重载:定制自己的运算符行为】

在C编程中&#xff0c;操作符重载是一项强大的特性&#xff0c;它允许程序员定制内置运算符的行为&#xff0c;使它们适用于用户自定义的数据类型。这篇博客将介绍什么是操作符重载&#xff0c;如何使用它&#xff0c;以及一些最佳实践。 什么是操作符重载&#xff1f; 操作符…...

Android Fragment 基本概念和基本使用

Android Fragment 基本概念和基本使用 一、基本概念 Fragment&#xff0c;简称碎片&#xff0c;是Android 3.0&#xff08;API 11&#xff09;提出的&#xff0c;为了兼容低版本&#xff0c;support-v4库中也开发了一套Fragment API&#xff0c;最低兼容Android 1.6。 过去s…...

xml schema中的all元素

说明 xml schema中的all元素表示其中的子元素可以按照任何顺序出现&#xff0c;每个元素可以出现0次或者1次。 https://www.w3.org/TR/xmlschema-1/#element-all maxOccurs的默认值是1&#xff0c;minOccurs 的默认值是1。 举例 <element name"TradePriceRequest&…...

Java8实战-总结42

Java8实战-总结42 用Optional取代null应用 Optional 的几种模式默认行为及解引用 Optional 对象两个 Optional 对象的组合使用 filter 剔除特定的值 用Optional取代null 应用 Optional 的几种模式 默认行为及解引用 Optional 对象 采用orElse方法读取这个变量的值&#xff0…...

实现日期间的运算——C++

&#x1f636;‍&#x1f32b;️Take your time ! &#x1f636;‍&#x1f32b;️ &#x1f4a5;个人主页&#xff1a;&#x1f525;&#x1f525;&#x1f525;大魔王&#x1f525;&#x1f525;&#x1f525; &#x1f4a5;代码仓库&#xff1a;&#x1f525;&#x1f525;魔…...

云上攻防-云原生篇K8s安全Config泄漏Etcd存储Dashboard鉴权Proxy暴露

文章目录 云原生-K8s安全-etcd未授权访问云原生-K8s安全-Dashboard未授权访问云原生-K8s安全-Configfile鉴权文件泄漏云原生-K8s安全-Kubectl Proxy不安全配置 云原生-K8s安全-etcd未授权访问 攻击2379端口&#xff1a;默认通过证书认证&#xff0c;主要存放节点的数据&#x…...

ChatGPT 的工作原理学习 难以理解 需要先找个容易的课来跟下。

ChatGPT 的工作原理 传统搜超搜引擎原理&#xff1a;蜘蛛抓取和数据收集&#xff0c;用户交互查找。 ChatGPT 的工作原理&#xff1a;数据收集称为预训练&#xff0c;用户响应阶段称为推理。 ChatGPT是一种基于自然语言处理技术的人工智能模型&#xff0c;它的工作原理建立在…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...

英国云服务器上安装宝塔面板(BT Panel)

在英国云服务器上安装宝塔面板&#xff08;BT Panel&#xff09; 是完全可行的&#xff0c;尤其适合需要远程管理Linux服务器、快速部署网站、数据库、FTP、SSL证书等服务的用户。宝塔面板以其可视化操作界面和强大的功能广受国内用户欢迎&#xff0c;虽然官方主要面向中国大陆…...

【2D与3D SLAM中的扫描匹配算法全面解析】

引言 扫描匹配(Scan Matching)是同步定位与地图构建(SLAM)系统中的核心组件&#xff0c;它通过对齐连续的传感器观测数据来估计机器人的运动。本文将深入探讨2D和3D SLAM中的各种扫描匹配算法&#xff0c;包括数学原理、实现细节以及实际应用中的性能对比&#xff0c;特别关注…...