vue3 +element-plus中避免一打开表单的下拉选择的change事件自动校验问题

背景：新增和编辑共用一个弹窗时，每次打开新增弹窗，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;
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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>   
1
2
3
4

const handleClose = () => {
  visible.value = false;
  ruleFormRef.value?.resetFields();// 只会重置必填项表单项（el-form-item有prop那个），并移除校验结果
  state.ruleForm = {} as api.StrategyConfForm;//让非必填项也清空
}
1
2
3
4
5

之前导致问题的错误写法：

<el-drawer v-model="visible" :title="state.dialogTitle" direction="rtl" size="400px" :close-on-click-modal="false"
  destroy-on-close>
   ...
 el-drawer>   
1
2
3
4

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;
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13

出现问题的原因：

每次打开弹窗时将整个表单项设为空对象，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;
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13