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

1. el-dialog设置高度

在el-dialog中里面添加一个div设置固定高度，或者限制最小的高度。

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

.system-icon-content {min-height: 300px;max-height: 400px;overflow: auto;
}

以下是我尝试过但无效的方法：
(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;}
};

如果表单中有非必填项，还是清除不掉：
因为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>   

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