背景:新增和编辑共用一个弹窗时,每次打开新增弹窗,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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐