问题
在一个循环部分字段的对话框表单中，关闭对话框时清除校验提示无效。
原代码如下：
对话框代码
<!-- 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在计算属性中书写。
参考链接
原文地址：http://www.cnblogs.com/shayloyuki/p/16896720.html
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请务用于商业用途!
3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
