初学者容易踩坑的的el-dialog、el-form问题
- 1. el-dialog设置高度
- 2. el-form中表单项对不齐
- 3. 使用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 = {}
}