vue实现月份选择复选（多选）

1：因为项目需求，需要做一个复选月份，网上和UI组件库都是单选的，所以就得自己捣鼓一个。废话不多说上效果图

2：介绍流程引入组件

3：selectDate组件里面 init函数初始化数据，获取前十年，然后循环每一年里面都有12个月的得到数组 opTime 和 DateList

created(){this.init();},methods:{// info 选中的数据 type 可传可不传 主要做区分showModal(info,type){this.visible = true;this.ctype = typethis.optTimes = info ? info.split(',') : nullif( info ) this.editTime(info);},init(){const _this = this;let _opt = {};let _optTime = {}let arr = new Array(12);let optDate = this.getDateList();optDate.map((item,index)=>{_opt[index] ={TimeYear:item,queryTime:[]}_optTime[index] ={TimeYear:item,queryTime:[]}for(let i = 1; i<= arr.length; i++){_opt[index].queryTime.push(i)}})_this.optTime = _optTime_this.DateList = _opt;},　　　　//获取前十年getDateList(){let Dates = new Date();let year = Dates.getFullYear();this.OneY = year;let  optDate = [];for( let i = year -20; i<=year; i++ ){optDate.push(i)}return optDate.reverse()},

4：完整代码

<template><a-modal:title="title"style="top: 20px;"v-model="visible"@ok="handleSubmit":width="'900px'":zIndex="12000"><a-row><a-col :span="4"  style="margin-right:10px" ><a-form-item:labelCol="labelCol":wrapperCol="wrapperCol"label="年份"><a-select  style="width:80px" :getPopupContainer="triggerNode=>triggerNode.parentNode"@change="selectTime"placeholder="请选择" v-model="OneY" ><a-select-option  v-for="(i,j) in DateList" :key="j" :value="i.TimeYear">{{i.TimeYear}}</a-select-option></a-select> </a-form-item></a-col><a-col :span="19"><div class="conterList"><a-checkbox-group v-model="optTime[curIndex].queryTime" @change="onChange" ><a-checkbox v-for="(item,index) in DateList[curIndex].queryTime":key="index" :value="`${DateList[curIndex].TimeYear}-${(item<=9)?`0${item}`:item}`"   class="onSelect">{{item}}月</a-checkbox></a-checkbox-group></div></a-col></a-row><a-row style="margin-top:5px;"><a-col :span="24"><div><label style="margin: 5px 5px 0 0;display:inline-block;"><span   style="color:#f00">*</span>已选择：</label><a-tag color="#40a9ff" style="margin-bottom: 3px;" closable @close="()=>closeTime(curIndex,v)" v-for="v in optTimes" :key="v + '-1'">{{ v }}</a-tag></div></a-col></a-row></a-modal>
</template>
<script>
export default {data(){return{visible:false,title:'日期选择',DateList:[],labelCol: {xs: { span: 24 },sm: { span: 10 }},wrapperCol: {xs: { span: 24 },sm: { span: 13 }},optTime:[],OneY:null,curIndex:0,optTimes:null,ctype:null}},created(){this.init();},methods:{// info 选中的数据 type 可传可不传 主要做区分showModal(info,type){this.visible = true;this.ctype = typethis.optTimes = info ? info.split(',') : nullif( info ) this.editTime(info);},init(){const _this = this;let _opt = {};let _optTime = {}let arr = new Array(12);let optDate = this.getDateList();optDate.map((item,index)=>{_opt[index] ={TimeYear:item,queryTime:[]}_optTime[index] ={TimeYear:item,queryTime:[]}for(let i = 1; i<= arr.length; i++){_opt[index].queryTime.push(i)}})_this.optTime = _optTime_this.DateList = _opt;},getDateList(){let Dates = new Date();let year = Dates.getFullYear();this.OneY = year;let  optDate = [];for( let i = year -20; i<=year; i++ ){optDate.push(i)}return optDate.reverse()},editTime(info){const _this = this;let _optTime = this.optTime;let _opt = this.optTimes.map(v=>{ return v.substring(0,4)});for( let item in _optTime ){_opt.map((items,indexs)=>{if( items == _optTime[item].TimeYear ){_optTime[item].queryTime.push(this.optTimes[indexs])}})}// console.log(_optTime,'_optTime_optTime')},handleSubmit(){const _this = this;_this.visible = false;_this.$emit('ok',_this.optTimes,_this.ctype)_this.optTimes = [];for( let i in _this.optTime  ){_this.optTime[i].queryTime =[]}},selectTime(info,Node){const _this = this;_this.OneY = info_this.curIndex = parseInt(Node.key) },onChange(info){const _this = this;let _opt = _this.optTime;let arr = [];for(let item in _opt ){if(_opt[item].queryTime.length > 0)  _opt[item].queryTime.filter(v=>{arr.push(v)})}_this.optTimes = arr},closeTime (index,time) {this.optTime[index].queryTime  =  this.optTime[index].queryTime.filter(v=>{return  v !== time})// let _opt = this.optTime;// let s = {};// for ( let i in _opt ){//  if(_opt[i].queryTime.length > 0) _opt[i].queryTime.filter(v=>{//         return v !== time//     })// }this.optTimes = this.optTimes.filter(v => {return v !== time})},}
}
</script>
<style lang="less" scoped>
.conterList{display: block;width: 100%;border-radius: 6px;.onSelect{width: 150px;margin: 0;}
}
</style>

5：组件调用方法根据refs 控制组件

 <selectDate  ref="OnDate" @ok="getDateValue" />

selectTime(type){const _this = this;let data = type == 1 ? _this.timeX :_this.timeY_this.$refs.OnDate.showModal(data,type)},getDateValue(info,cType){if( cType == 1  ){this.timeX = info.join(',')}else{this.timeY = info.join(',')}},

6：好了就这样实现了。

vue实现月份选择复选（多选）相关推荐

复选框全选效果，根据单个复选框的选择情况确定全选复选框是否被选
复选框全选与全不选效果逻辑:复选框的checked属性与复选框全选效果对应起来,全选复选框checked:true 时,全部复选框checked:true: 全选框checked:false 时,全 ...
php 复选框单选全选,复选框全选/不全选，选择结果提交
$(function(){ $("#CheckedAll").click(function(){ if(this.checked) //如果当前点击的多选框被选中 { $('inp ...
vue+elementUI 添加多个可以全选的多选框
elementUI-checkbox官网:https://element.eleme.cn/#/zh-CN/component/checkbox 一.要做上面这种效果,首先要了解全选框中indeter ...
学计算机要6选3选什么学科,北京高考6选3组合有多少种？选择学科对有哪些影响？...
北京高考6选3都有哪些组合呢?其实对于新高考我们部分省份还是很陌生的,面对新的变化以及新的政策,我们的学生和家长们其实更应该注意,小编今天为大家整理了关于北京高考6选3组合的相关情况,以及我们在选科的 ...
vue 带全选和多选的表格怎么写_vue实现下拉列表多选全选以及模糊查询的vue组件...
vue实现下拉列表多选全选以及模糊查询的vue组件发布时间:2018-09-12 17:41, 浏览次数:3776 , 标签: vue <>前端,有时有这样的需求,需要一个下拉列表,还要 ...
VUE：checkbox 单选框（单选、多选）、一选全选 / 全选一选、表格单选列实现
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 效果:如红框中部分. 一选全选:表头上的单选框选中则下面每行都选中. 全选一选:表中数据每行都 ...
统计订单：复选+全选+计算的列表
话不多说,先上效果图.带选择框和全选按钮的列表,因一些特殊要求还加上些计算功能,这并不是难就是稍微繁琐了些,如 "统计订单功能" 不要说,就是干,那就直接上代码 1,主页面的布局文 ...
jQuery - 通过文本描述设置选择控件的选定值
本文翻译自:jQuery - setting the selected value of a select control via its text description I have a sele ...
关于如何获取复选框选中行的数据
前两天遇到一个需求,需要获取复选框选中行的数据再进行数据的操作,找了几篇文章,发现要么是获取不了,要么是只能获取单行,总之就是挺模糊的,不够细致,所以就自己通过摸索实现了,现在将这个方法进行整理分享给 ...

vue实现月份选择复选（多选）

6：好了就这样实现了。

vue实现月份选择复选（多选）相关推荐

最新文章

热门文章