el-dialog设置高度、使用resetFields清除表单项无效问题

 <el-dialog
    title="选择图标"
    v-model="iconDialogVisible"
    :close-on-click-modal="false"
    :width="480"
    destroy-on-close>
    <div class="system-icon-content">
     

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

.system-icon-content {
  min-height: 300px;
  max-height: 400px;
  overflow: auto;
}
1
2
3
4
5

以下是我尝试过但无效的方法：
(1)在el-dialog外面包裹一个div，给它设置样式
(2) 在el-dialog上自定义样式，使用deep去穿透样式
(3)使用 !important

2. el-form中表单项对不齐

设置固定的label-width值

3. 使用resetFields清除表单项无效

每次打开表单在 nextTick中调用表单的resetFields方法

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

如果表单中有非必填项，还是清除不掉：
因为resetFields方法只对具有校验的表单元素才有效。
可以将在弹窗关闭时将表单赋值为空，手动重置表单项。
注意：不要去使用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

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