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

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

</el-form-item>
<el-form-item label="采取措施:" prop="measure">
<el-input style="width:5rem;" v-model="addKeyPersonForm.measure" placeholder="请输入措施"></el-input>
</el-form-item>
<el-form-item label="控制人员:" prop="controller">
<el-table
:data="addKeyPersonForm.controller"
stripe
height="1rem"
style="width: 5rem;">
<el-table-column
prop="name"
label="姓名"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="sex"
label="性别"
width="60">
</el-table-column>
<el-table-column
prop="birth"
show-overflow-tooltip
label="出生日期">
</el-table-column>
<el-table-column
prop="post"
show-overflow-tooltip
label="职务">
</el-table-column>
<el-table-column
prop="phone"
show-overflow-tooltip
label="联系电话">
</el-table-column>
<el-table-column
label="操作"
width="60">
<template slot-scope="scope">
<el-button
@click.native.prevent="deleteRow(scope.$index)"
type="text"
size="small">
移除
</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="text" icon="el-icon-plus" @click="innerVisible = true">继续添加</el-button>
</el-form-item>
<el-form-item label="备注:" prop="remark">
<el-input style="width:5rem;" type="textarea" rows="1" v-model="addKeyPersonForm.remark" placeholder="请输入备注"></el-input>
</el-form-item>
<el-form-item label="最后更新时间:" v-if="addKeyPersonForm.updateTime">
<p style="width:4.7rem;">{{addKeyPersonForm.updateTime}}</p>
</el-form-item>
<el-form-item style="text-align:center;display:block;">
<el-button type="primary" @click="onSubmit" :disabled="doSubmitFlag">保存</el-button>
</el-form-item>
</el-form>
<!--添加控制人员弹框------------------开始-->
<el-dialog
width="4.2rem"
title="添加控制人员"
v-if="innerVisible"
:visible.sync="innerVisible"
append-to-body
:before-close="closeFun">
<personnel-control-add @add-person="addPerson" ref="addForm"></personnel-control-add>
</el-dialog>
<!--添加控制人员弹框------------------结束-->
<!--选择经纬度弹框------------------开始-->