Element-UI的el-date-picker组件验证.开始时间与结束时间在一个input里

Question

现在要做的是一个导出的功能,点击导出会出现一个弹窗,然后面有三项必填项:

1. 数据来源
2. 处理状态
3. 时间范围

用的框架是vue+ElementUI
前面的2项的验证是正确的,可以进行验证.但是时间范围我选择上之后还是提示我请选择时间.
下面是我的代码:

            <el-dialog
            title="导出参数设置"
            :visible.sync="dialogVisible"
            width="30%">
                <el-form ref="modelExport" :model="modelExport" :rules="rules" >
                    <el-row>
                        <el-col>
                            <el-form-item label="数据来源 : " prop="dealer" label-width="108px">
                            <el-select v-model="modelExport.dealer" placeholder="请选择">
                                <el-option                    
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item label="处理状态 : " prop="processingStatus" label-width="108px">
                                <el-select v-model="modelExport.processingStatus" placeholder="请选择">
                                    <el-option
                                    v-for="item in optionStatus"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="时间范围 : " prop="dataTime" label-width="108px">    
                            <el-date-picker
                            placeholder="选择日期范围"
                            type="daterange"
                            format="yyyy-MM-dd"
                            v-model="modelExport.dataTime"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="problem_export('modelExport')">导 出</el-button>
                <el-button @click="cancel_problem_export('modelExport')">取 消</el-button>                
            </span>
            </el-dialog>

以下是我的data里面的数据:

            modelExport: {
                //导出表单
                dealer: "", //处理人
                processingStatus: "", //处理状态
                dataTime: "" //数据范围
            },

以下是我的验证:

            rules: {
                dealer: [
                    { required: true, message: "请选择处理人", trigger: "blur"}
                ],
                processingStatus: [
                    { required: true, message: "请选择处理状态", trigger: "blur"}
                ],
                dataTime:[
                    { required: true, message: '请选择时间范围', trigger: 'change' }
                ]
            }

Answer 1

感觉你这个写得怪怪的啊，如果是一个时间区域，那你v-model的数据应该是个数组啊，你试试改成数组呢

Answer 2

你这个时间范围rules使用的什么表单验证插件啊?求教~~

Answer 3

我也遇到这个问题，请问你解决了吗？你是怎么处理的？