element 日期控件使用记录

日期控件

<el-date-picker 
    v-model="addForm.yearMonth" 
    type="month" 
    @change="getCurrentData" 
    placeholder="选择月">
</el-date-picker>

设置默认值

this.$set(that.addForm, "yearMonth", date);

change事件，可以通过日期改变获取数据进行动态数据填充

            getCurrentData(value) {
                
                var date = value
                var that = this;
               
                // 通过日期改变获取动态数据进行填充
                axios({
                    method: 'get',
                    url: '/',
                }).then(function (result) {
                    
                    if (result.data.data.length > 0) {
                       that.addForm = Object.assign({}, result.data.data[0]);
                    } else {
                       that.addForm = {};
                    }
                    // 因为上面清空数据，需要重新设置值
                    that.$set(that.addForm, "yearMonth", date);
                    
                });
            }

两个日期控件相互控制影响

<el-form-item label="年份">
    <el-date-picker 
        v-model="searchParam.startDate" 
        type="year" 
        :picker-options="pickerOptions1" 
        placeholder="选择年">
    </el-date-picker>
    <span>至</span>
    <el-date-picker 
        v-model="searchParam.endDate" 
        type="year" 
        :picker-options="pickerOptions2" 
        placeholder="选择年">
    </el-date-picker>
</el-form-item>

选择开始日期设置结束日期值不能小于开始日期

vm = new Vue({
        el: '#app',
        data() {
            return {
                searchParam: {},
                pickerOptions1: {
                    disabledDate:(time)=> {
                        if(this.searchParam.endDate) return time.getTime() > new Date(this.searchParam.endDate).getTime();
                        else return
                    }
                },
                pickerOptions2: {
                    disabledDate:(time)=> {
                        if(this.searchParam.startDate) return time.getTime() < new Date(this.searchParam.startDate).getTime();
                        else return
                    }
                },
            };
        },
        methods: {

        },
        mounted(){
            
        },
    })