what you need to do now is an export function. Clicking on Export will bring up a pop-up window, and then there will be three required items:
- data sources
- processing status
- time range
the framework used is vue+ElementUI
the verification of the first two items is correct and can be verified. But after I choose the time range, I still prompt me to choose a time.
here is my code:
<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>
the following is the data in my data:
modelExport: {
//
dealer: "", //
processingStatus: "", //
dataTime: "" //
},
the following is my verification:
rules: {
dealer: [
{ required: true, message: "", trigger: "blur"}
],
processingStatus: [
{ required: true, message: "", trigger: "blur"}
],
dataTime:[
{ required: true, message: "", trigger: "change" }
]
}