[Dialog] Dialog 组件嵌入 Form 表单校验必填项提示会出现滚动条，很难看 #1862
Description
tdesign-vue-next-starter 版本
1.9.6
重现链接
No response
重现步骤
"tdesign-vue-next": "^1.9.6",
我换成el-dialog 的时候是正常的
期望结果
Dialog 嵌入 Form 校验必填项，不出现滚动条，跟el-dialog 的效果一样。
`
<t-button theme="primary" @click="openDialog">批量派单
OrangeContentSlot
<t-form-item label="服务商" name="agentId">
<t-select>
<t-option key="apple" label="Apple" value="apple" />
<t-option key="orange" label="Orange" value="orange">OrangeContentSlot</t-option>
<t-option key="banana" label="Banana" value="banana" />
</t-select>
</t-form-item>
</t-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="showDialog = false">取消1</el-button>
<el-button type="primary" @click="onConfirm(formRef)">确定</el-button>
</div>
</template>
<!-- </el-dialog> -->
</t-dialog>
</t-space>
const visible = ref(false);
const openDialog = (context) => {
visible.value = true;
};
const formRef = ref(null);
const onConfirm = async () => {
console.log("onConfirm")
const formEl = formRef.value;
if (!formEl) return;
await formEl.validate(async (valid, fields) => {
if (valid) {
console.log('submit!');
// let params = form.value;
// let platformType = platformTypeNoOptions.value.find((item) => item.dictValue == form.value.platformTypeNo);
// params.platformTypeName = platformType.dictLabel;
// // console.log('params=>', params);
// // return;
// try {
// let res =
// props.crud == 3
// ? await updateById(
// Object.assign(
// {
// id: props.queryItems.id
// },
// params
// )
// )
// : await insertUpProductMapping(params);
// console.log('res', res);
// ElMessage({
// message: '操作成功',
// type: 'success'
// });
// emit('on-search', {});
// showDialog.value = false;
// } catch (err) {
// console.error(err);
// }
} else {
console.log('error submit!', fields);
}
});
};
const onCancel = (context) => {
console.log('点击了取消按钮', context);
};
const FORM_RULES = {
platform: [{ required: true, message: '必填项' }],
agentId: [{ required: true, message: '必填项' }]
};
const formData = reactive({
platform: '',
agentId: ''
});
// const onSubmit = ({ validateResult, firstError }) => {
// if (validateResult === true) {
// MessagePlugin.success('提交成功');
// } else {
// console.log('Validate Errors: ', firstError, validateResult);
// MessagePlugin.warning(firstError);
// }
// };
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const resetForm = () => {
form.value.reset();
// 下方为示例代码，有效，勿删
// form.value.reset({ type: 'initial' });
// form.value.reset({ type: 'empty' });
// form.value.reset({ type: 'initial', fields: ['name'] });
// form.value.reset({ type: 'empty', fields: ['name'] });
};
</script>
`
实际结果
框架版本
No response
浏览器版本
No response
系统版本
No response
Node版本
No response
补充说明
No response