月份選擇復選（多選）Ant Design of Vue

1：因為項目需求，需要做一個復選月份，網上和UI組件庫都是單選的，所以就得自己搗鼓一個。廢話不多說上效果圖

 

 

2：介紹流程引入組件

 

 

 3：selectDate組件里面 init函數 初始化數據，獲取前十年，然后循環 每一年里面都有12個月的 得到數組 opTime 和 DateList

 created(){
        this.init();
    },
    methods:{
        // info 選中的數據 type 可傳可不傳 主要做區分
        showModal(info,type){
            this.visible = true;
            this.ctype = type
            this.optTimes = info ? info.split(',') : null
            if( 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 = type
            this.optTimes = info ? info.split(',') : null
            if( 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：好了就這樣實現了。