网站空间费用,wordpress安装音乐插件,wordpress友情链接单页,wordpress 主题定制初学者容易踩坑的的el-dialog、el-form问题 1. el-dialog设置高度2. el-form中表单项对不齐3. 使用resetFields清除表单项无效 1. el-dialog设置高度
在el-dialog中里面添加一个div设置固定高度#xff0c;或者限制最小的高度。 el-dialogtitle选择图标v-mod… 初学者容易踩坑的的el-dialog、el-form问题 1. el-dialog设置高度2. el-form中表单项对不齐3. 使用resetFields清除表单项无效 1. el-dialog设置高度
在el-dialog中里面添加一个div设置固定高度或者限制最小的高度。 el-dialogtitle选择图标v-modeliconDialogVisible:close-on-click-modalfalse:width480destroy-on-closediv classsystem-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-modelvisible :titlestate.dialogTitle directionrtl size400px :close-on-click-modalfalseclosehandleClose/el-drawer const handleClose () {visible.value false;ruleFormRef.value?.resetFields();// 只会重置必填项表单项el-form-item有prop那个并移除校验结果state.ruleForm {}
}
