[vue+elementUI]-el-date-picker：日期选择器的数据怎么处理？

最新推荐文章于 2024-07-22 08:55:10 发布

小孙今天学习了吗

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量165

点赞数 3

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/apple_66155743/article/details/139355985

版权

html部分：

<el-form ref="ruleForm" :model="ruleForm" label-width="100px" class="demo-ruleForm">
   <el-form-item label="注册时间" prop="registerAt">
       <el-date-picker v-model="ruleForm.registerAt" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="registerAtChange" />
   </el-form-item>
   <el-form-item>
        <el-button type="primary" @click="searchButton('ruleForm')">搜索</el-button>                               
    </el-form-item>
</el-form>

data部分：

data(){
   ruleForm: {
                registerAt: '',
                registerAtBegin: '',
                registerAtEnd: ''
            },
}

函数处理：

// el-date-picker值的处理函数
registerAtChange(value) {
            if (value) {
                this.$set(this.ruleForm, 'registerAtBegin', Math.ceil(value[0] / 1000));
                this.$set(this.ruleForm, 'registerAtEnd', Math.ceil(value[1] / 1000) + 24 * 60 * 60 - 1);
            } else {
                this.$set(this.ruleForm, 'registerAtBegin', null);
                this.$set(this.ruleForm, 'registerAtEnd', null);
            }
        },
//传值处理 
async searchMore() {
            try {
                this.listLoading = true;
                // 数据
                const params = {
                    registerAtBegin: this.ruleForm.registerAt ? this.ruleForm.registerAt[0] : undefined,
                    registerAtEnd: this.ruleForm.registerAt ? this.ruleForm.registerAt[1] : undefined,
                };
                if (this.ruleForm.registerAtBegin && this.ruleForm.registerAtEnd) {
                    params.registerAtBegin = this.ruleForm.registerAtBegin;
                    params.registerAtEnd = this.ruleForm.registerAtEnd;
                }
                const res = await abcMore(params);
                const items = res.rows || [];
                this.userList = items;
                this.listLoading = false;
            } catch (e) {
                this.listLoading = false;
            }
        },
// 提交表单
searchButton(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.searchMore();
                }
            });
        },