elementui选择月份加上中下旬

最新推荐文章于 2024-04-28 17:20:27 发布

lning8808

最新推荐文章于 2024-04-28 17:20:27 发布

阅读量661

点赞数

本文链接：https://blog.csdn.net/lning8808/article/details/103487601

版权

在项目中遇到按月份上旬、中旬、下旬查询数据的需求，由于ElementUI未提供直接功能，本文介绍了一种自定义实现的方法，以满足此类查询需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目遇到要求按月份的上旬，中旬，下旬查询数据，因为没有找到elementui的控件就自己写了一个方法，其实也算不上什么方法，就是一个实现方式，记录一下

//选择月份 上中下旬部分代码
<div style="position:relative;width:15%;max-width:200px;margin-left:5px;">
	<el-date-picker class="dates datashide" @blur="xunSearch" style="max-width:200px;width:100%;left:0;"  format="yyyy-MM" v-model="month" type="month" placeholder="按旬查询" :picker-options="xun"></el-date-picker>
	<el-select v-model="selexun"  placeholder="按旬查询" style="max-width:200px;margin-right:5px;width:100%;" id="aa" @change="seles" class="sele tenDays" clearable>
		<el-option key="1" label="上旬" value="1"></el-option>
		<el-option key="2" label="中旬" value="2"></el-option>
		<el-option key="3" label="下旬" value="3"></el-option>
	</el-select>
</div>

//data部分
data(){
	return {
		month:'',
		selexun:'',
		xunVal:'',
		xun:{
			disabledDate: (time) => {
			    return time.getTime() > Date.now();
			}
		}
	}
},

//methods部分
methods:{
	xunSearch(val){
		this.isShow = true
		this.showXun = true
		$("#aa").click()
	},
	seles(){
		let xun
		if(this.selexun == 1){
			xun = "上旬"
		}else if(this.selexun == 2){
			xun = "中旬"
		}else{
			xun = "下旬"
		}
		var y = this.month.getFullYear();
		var m = this.month.getMonth() + 1;
		m = m < 10 ? ('0' + m) : m;
		this.xunVal =this.selexun
		this.selexun = y + '-' + m + '-' + xun
	},
}