需求:
表单代码:
<el-dialog
class="dialog-container"
:title="formEditTitle"
:visible.sync="dialogEdittVisible"
@close="closeDialog('formEdit')"
@keyup.enter.native="onConfirm"
>
<el-form ref="formEdit" :rules="rulesEdit" :model="formEdit" :inline="true">
<el-form-item label="对象类型" prop="monitorObjType" class="form-item-short">
<el-select
v-model="formEdit.monitorObjType"
filterable
class="item-select"
@change="onChangeEditMonitorObjType"
>
<el-option
v-for="item in optionsEditMonitorObjType"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<template v-if="this.monitorObjType === 'SERVER'">
<el-form-item label="监控对象" prop="monitorObjNum" class="form-item-short">
<el-select
v-model="formEdit.monitorObjNum"
filterable
class="item-select"
@focus="onFocusMonitorObj"
>
<el-option
v-for="item in optionsMonitorObjEdit"
:key="item.id"
:label="item.name"
:value="item.num"
/>
</el-select>
</el-form-item>
</template>
<template v-if="this.monitorObjType === 'SYSTEM'">
<el-form-item label="监控编号" prop="monitorObjNum" class="form-item-short">
<el-input
v-model.trim="formEdit.monitorObjNum"
placeholder="监控对象编号"
class="item-input"
/>
</el-form-item>
<el-form-item label="监控名称" prop="monitorObjName" class="form-item-short">
<el-input
v-model.trim="formEdit.monitorObjName"
placeholder="监控对象名称"
class="item-input"
/>
</el-form-item>
</template>
<el-form-item :key="1" label="用户名" prop="username" class="form-item-short">
<el-input v-model.trim="formEdit.username" placeholder="用户名" class="item-input" />
</el-form-item>
<el-form-item label="密码" prop="password" class="form-item-short">
<el-input
v-model.trim="formEdit.password"
placeholder="密码"
class="item-input"
show-password
/>
</el-form-item>
<el-form-item label="ip地址" prop="ipAddress" class="form-item-short">
<el-input v-model.trim="formEdit.ipAddress" placeholder="ip地址" class="item-input" />
</el-form-item>
<el-form-item label="端口号" prop="port" class="form-item-short">
<el-input v-model.number="formEdit.port" placeholder="端口号" class="item-input" />
</el-form-item>
<el-form-item label="是否启用" prop="enabled" class="form-item-short">
<el-radio-group v-model="formEdit.enabled" size="mini">
<el-radio :label="true">启用</el-radio>
<el-radio :label="false">禁用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogEdittVisible = false">取 消</el-button>
<el-button type="primary" @click="onConfirm">确 定</el-button>
</div>
</el-dialog>
使用深度监听表单的变化:
// 刷新校验规则
watch: {
formEdit: {
deep: true,
handler(val) {
// console.log(val,999)
this.FromEdit = {}
this.$nextTick(() => {
this.$refs.formEdit.resetFields()
})
}
}
},