vue3 +element-plus中避免一打开表单的下拉选择的change事件自动校验问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
背景:新增和编辑共用一个弹窗时,每次打开新增弹窗,el-select
的表单项会触发change
事件的自动校验。我这里的下拉选择是支持多选的,也就是属性上有multiple
。
以下解决方法,亲测有用!!
1. 该表单项设置初始值为空数组,每次打开表单在nextTick中重置表单项
const showEditDialog = async (type: 'add' | 'mod', row?) => {
await getInterfaceList();
nextTick(() => {
ruleFormRef?.value?.resetFields();
})
state.editType = type;
if (type === 'add') {
state.dialogTitle = '添加策略配置';
} else {
state.dialogTitle = '编辑策略配置';
state.ruleForm = _.cloneDeep(row);//防止编辑时的表单影响这行表格数据
state.oldCode = row.code;
}
};
2. 关闭弹窗使用 close事件,手动重置表单项
注意:不要使用destroy-on-close
,不然会第二次打开表单时,上回的值还存在。
<el-drawer v-model="visible" :title="state.dialogTitle" direction="rtl" size="400px" :close-on-click-modal="false"
@close="handleClose">
...
</el-drawer>
const handleClose = () => {
visible.value = false;
ruleFormRef.value?.resetFields();// 只会重置必填项表单项(el-form-item有prop那个),并移除校验结果
state.ruleForm = {} as api.StrategyConfForm;//让非必填项也清空
}
之前导致问题的错误写法:
<el-drawer v-model="visible" :title="state.dialogTitle" direction="rtl" size="400px" :close-on-click-modal="false"
destroy-on-close>
...
</el-drawer>
const showEditDialog = async (type: 'add' | 'mod', row?) => {
ruleFormRef.value?.resetFields();
await getInterfaceList();
state.ruleForm = {} as api.StrategyConfForm;
state.editType = type;
if (type === 'add') {
state.dialogTitle = '添加策略配置';
} else {
state.dialogTitle = '编辑策略配置';
state.ruleForm = _.cloneDeep(row);
state.oldCode = row.code;
}
};
出现问题的原因:
每次打开弹窗时将整个表单项设为空对象,el-select那一个表单项没有给初始值为空数值,所以会检测到这项是为空的,触发change事件校验。
改了下,这样也是可以的,关闭时再使用 close事件,手动重置表单项。
const showEditDialog = async (type: 'add' | 'mod', row?) => {
await getInterfaceList();
state.ruleForm = {} as api.StrategyConfForm;
state.ruleForm.interfaceIds = [];//这里要给它设置初始值为空数组,不然会触发change事件校验
state.editType = type;
if (type === 'add') {
state.dialogTitle = '添加策略配置';
} else {
state.dialogTitle = '编辑策略配置';
state.ruleForm = _.cloneDeep(row);
state.oldCode = row.code;
}
};
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献9条内容
所有评论(0)