vue+elementUI实现表单和图片上传及验证功能示例

2020-06-16 05:57:10易采站长站整理

<el-option
v-for="item in keyPersonType"
:key="item.id"
:label="item.dataValue"
:value="item.dataKey">
{{item.dataValue}}
</el-option>
</el-select>
</el-form-item>
<el-form-item label="户籍地:" prop="registered">
<!-- <el-select style="width:1.3rem;" v-model="addKeyPersonForm.huji" placeholder="请选择">
<el-option label="青岛市" value="0"></el-option>
<el-option label="北京市" value="1"></el-option>
</el-select>-->
<el-cascader style="width:1.3rem;"
:options="options"
placeholder="请选择"
v-model="addKeyPersonForm.registered"
:rules="{type: 'array'}"
@change="handleChange"
:separator="' '">
</el-cascader>
</el-form-item>
<el-form-item prop="registeredDetails">
<el-input style="width:3.55rem;" v-model="addKeyPersonForm.registeredDetails" placeholder="请输入详细地址"></el-input>
</el-form-item>
<el-form-item label="居住地:" prop="domicile">
<!--<el-select style="width:1.3rem;" v-model="addKeyPersonForm.juzhu" placeholder="请选择">
<el-option label="青岛市" value="0"></el-option>
<el-option label="北京市" value="1"></el-option>
</el-select>-->
<el-cascader style="width:1.3rem;"
:options="options"
placeholder="请选择"
:rules="{type: 'array'}"
v-model="addKeyPersonForm.domicile"
@change="handleChange"
:separator="' '">
</el-cascader>
</el-form-item>
<el-form-item prop="domicileDetails">
<el-input style="width:3.55rem;" v-model="addKeyPersonForm.domicileDetails" placeholder="请输入详细地址"></el-input>
</el-form-item>
<el-form-item label="经纬度:">
<el-input style="width:5rem;" v-model="position" placeholder="请选择经纬度" @click.native="showPosition=true"></el-input>
</el-form-item>
<!--<el-form-item label="所属人员库:">
<el-select style="width:4.75rem;" v-model="addKeyPersonForm.library" placeholder="请选择">
<el-option label="全国重点人员库1" value="0"></el-option>
<el-option label="全国重点人员库2" value="1"></el-option>
</el-select>
</el-form-item>-->
<el-form-item label="问题及现实表现:" prop="problem">
<el-input style="width:5rem;" v-model="addKeyPersonForm.problem" placeholder="请输入问题及现实表现"></el-input>