clearValidate() 清除表单校验提示无效
问题
在一个循环部分字段的对话框表单中,关闭对话框时清除校验提示无效。
原代码如下:
对话框代码
<!-- 2. 对话框 -->
<el-dialog class="dialog" :title="dialogTitle" :visible.sync="dialogOpen" width="800px" append-to-body :close-on-click-modal="false" :before-close="cancel">
<div class="dialog-content">
<el-form class="dialog-form" ref="form" :model="form" :rules="rules" label-width="120px">
<!-- 不循环的部分:上级节点 -->
<el-form-item :label="`上级类`" prop="pid">
<select-tree
:node-label="`类`"
:model-val="form.pid"
:exchange-node="exchangeClass"
:is-disabled="moduleType === 'view'"
:option-tree="classDataTree"
@return-model="(val) => form.pid = val"
/>
</el-form-item>
<!-- 循环字段内容 -->
<el-form-item v-for="item in fieldList" :key="item.field" :label="item.label" :prop="item.field" :rules="rules[item.field]">
<select-tree
v-if="item.type && item.type === 'selectTree'"
:dis-branch-nodes="item.disBranchNodes"
:node-label="item.nodeLabel"
:model-val="form[item.field]"
@return-model="(val) => form[item.field] = val"
:exchange-node="item.exchangeNode"
:is-disabled="moduleType === 'view'"
:option-tree="item.optionTree" />
<el-input v-else v-model="form[item.field]" :placeholder="`请输入${item.label}`" clearable :disabled="moduleType === 'view'" />
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer">
<el-button type="success" icon="el-icon-plus" @click="addProp" :disabled="moduleType === 'view' || disPropAdd">添加属性</el-button>
<el-button type="primary" @click="submitForm" :loading="btnLoading" v-if="moduleType !== 'view'">保存</el-button>
<el-button @click="cancel" :type="moduleType === 'view' ? 'primary' : null" v-text="moduleType === 'view' ? '返回' : '取消'" />
</div>
</el-dialog>
data 声明的对话框数据
/* === 对话框数据 === */
dialogOpen: false,
moduleType: 'view',
nodeLabelClass: '类名',
exchangeClass: {
id: 'id',
label: 'className',
children: 'children'
},
exchangeFigure: {
id: 'id',
label: 'name',
children: 'children'
},
exchangeFigure3d: {
id: 'id',
label: 'name',
children: 'children'
},
form: {
id: null,
pid: null, // 上级类名id
className: '',
classEnglishName: '',
businessCode: null,
description: '',
figureDataId: null,
figure3dId: null,
commonAttributeList: [], // 继承属性列表
measureAttributeList: [] // 独有属性列表
},
// 独有属性数据
attributeIdsAndUnitIds: [],
btnLoading: false,
计算属性
computed: {
/* 字段数据 */
fieldList() {
return [
{ field: 'className', label: '类名', isSearch: true, isRequired: true },
{ field: 'classEnglishName', label: '类标识', isSearch: true, isRequired: true },
{ field: 'businessCode', label: '业务编码', isSearch: false, isRequired: true },
{ field: 'figureDataId', label: '关联PID', isSearch: false, isRequired: false, type: 'selectTree', nodeLabel: 'PID', exchangeNode: this.exchangeFigure, optionTree: this.figureList, disBranchNodes: true, filterPool: this.figureContentList},
{ field: 'figure3dId', label: '关联GLB/GLE', isSearch: false, isRequired: false, type: 'selectTree', nodeLabel: 'GLB/GLE', exchangeNode: this.exchangeFigure3d, optionTree: this.figureThreeDList, disBranchNodes: true, filterPool: this.figure3dContentList},
{ field: 'description', label: '描述', isSearch: false, isRequired: false }
]
},
// 对话框表单校验规则
rules() {
let validArr = this.fieldList.filter(ele => ele.isRequired)
let obj = {}
validArr.forEach(ele => {
obj[ele.field] = [{ required: true, message: '请输入' + ele.label, trigger: "blur" }]
})
obj['pid'] = [{ required: true, message: `请输入上级${this.nodeLabel}`, trigger: "change" }]
return obj
},
}
methods函数
/* 取消对话框按钮 */
cancel() {
this.reset()
this.dialogOpen = false
},
/* 重置表单 */
reset() {
this.attributeIdsAndUnitIds = []
this.moduleType = ''
this.form = {
id: null,
pid: null, // 上级类名id
className: '',
classEnglishName: '',
businessCode: null,
description: '',
figureDataId: null,
figure3dId: null,
commonAttributeList: [], // 继承属性列表
measureAttributeList: [] // 独有属性列表
}
this.btnLoading = false
this.$nextTick(()=>{
this.$refs['form'].clearValidate()
})
},
尝试
尝试了:
this.$nextTick()
this.form = {}
this.$refs.form.clearValidate()
上述方法混合使用都无法清除校验提示。
又尝试了 this.$refs.form.clearValidate(propName)
遍历清除单个校验信息,仍然无效。
经过和其他正常显示的对话框表单对比后,测试:把计算属性中的 rules
注释掉,改在 data
中声明 rules
,发现就能正常显示。
但是表单部分字段是循环的,不能直接在 data
中全部声明。
解决:
非循环字段的校验规则
rules
在data
中声明;
循环字段的校验规则loopFieldsRules
在计算属性中书写。
参考链接
本文来自博客园,作者:shayloyuki,转载请注明原文链接:https://www.cnblogs.com/shayloyuki/p/16896720.html
posted on 2022-11-16 17:30 shayloyuki 阅读(2889) 评论(0) 编辑 收藏 举报