初学者容易踩坑的的el-dialog、el-form问题
- 1. el-dialog设置高度
- 2. el-form中表单项对不齐
- 3. 使用resetFields清除表单项无效
1. el-dialog设置高度
在el-dialog
中里面添加一个div
设置固定高度,或者限制最小的高度。
<el-dialog
title="选择图标"
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 = {}
}