TDesign表单中按钮和输入框间距不一致,如何按规范对齐? 玉茂酱~ 提问于 2026-01-26 22:54:26 阅读 56 组件 在用TDesign做表单布局时,输入框和按钮之间的间距总感觉不对劲。比如下面这段代码,输入框和按钮用了同样的margin,但实际看起来垂直间距明显不一致: 提交 按照TDesign的设计规范应该怎样调整间距?试过把margin改成theme.config.js里定义的变量,但效果还是不理想。是不是哪里没按规范来? 我来解答 赞 12 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 2 条解答 Mr-恩希 Lv1 应该是表单控件的上下间距没有统一。TDesign的表单组件默认使用margin-bottom: 20px对齐,建议用tdesign-form包裹控件,或者手动给输入框和按钮统一设置margin-bottom: 20px即可对齐。 代码如下: 提交 回复 点赞 9 2026-02-07 10:18 诸葛淑怡 Lv1 直接上懒人方案:别折腾margin了,用TDesign自带的formColProps或者FormItem的栅格布局功能来控制间距,统一整个表单的布局节奏。比如这样: <Form.Item label="输入框" formColProps={{ span: 8 }}> <Input /> </Form.Item> <Form.Item formColProps={{ span: 8, offset: 2 }}> <Button>提交</Button> </Form.Item> 按规范走栅格系统,间距自然就对齐了,省心。 回复 点赞 20 2026-01-29 16:00 加载更多 相关推荐 1 回答 23 浏览 TDesign 表单重置后校验信息没清除怎么办? 我用 TDesign 的 Form 组件做了一个带校验的表单,点击重置按钮后字段值清空了,但红色的校验提示还在页面上,看着很奇怪。 我试过调用 formRef.value.reset(),也试过手动把... 宇文梓辰 组件 2026-03-10 10:21:20 1 回答 27 浏览 TDesign 组件的自定义主题色为啥不生效? 我在项目里用了 TDesign Vue 组件库,想把主色改成公司品牌色 #FF6B35,但改完后按钮、输入框这些组件颜色还是默认的蓝色,完全没变。 我按照文档在 main.js 里引入了自定义变量文件... 皇甫熙炫 组件 2026-03-19 08:49:17 2 回答 32 浏览 TDesign 表单校验不生效是怎么回事? 我在用 TDesign 的 Form 组件做表单校验,rules 也配了,但提交时根本没触发校验,直接就通过了。明明字段是必填的,却一点提示都没有。 我试过把 rules 写在 FormItem 上,... 东方玉戈 组件 2026-03-17 16:15:18 2 回答 38 浏览 TDesign 表单校验不生效是怎么回事? 我用 TDesign 的 Form 组件做表单校验,但明明设置了 rules,提交时却完全没触发校验,直接就通过了,这是啥情况? 我试过把 required 设成 true,也检查了字段名和 mode... 打工人一可 组件 2026-03-17 13:38:22 1 回答 26 浏览 TDesign Steps步骤条如何动态更新当前步骤? 我在用 TDesign 的 Steps 组件做一个多步骤表单,想根据用户操作动态改变当前步骤(current),但发现页面上步骤条没反应。我试过直接修改 data 里的 current 值,也用了 V... 丽丽 ☘︎ 组件 2026-03-09 17:14:24 2 回答 34 浏览 TDesign Dialog 关闭后怎么清除表单数据? 我在用 TDesign 的 Dialog 组件做编辑弹窗,里面有个表单。现在问题是,关闭对话框后再打开,表单里还留着上次的数据,这肯定不行啊。 我试过在 on-close 里手动清空数据,但好像时机不... 诸葛翌菡 组件 2026-03-08 05:43:19 1 回答 33 浏览 TDesign 表单重置后为什么校验状态没清除? 我在用 TDesign 的 Form 组件做表单,调用 form.reset() 之后字段值清空了,但之前校验失败的红色提示和边框还在,这是为啥? 我试过手动 setFieldsValue 清空字段,... 闲人鑫鑫 组件 2026-03-03 19:01:22 2 回答 55 浏览 TDesign对话框关闭后表单内容未重置怎么办? 用TDesign的Dialog做表单弹窗时遇到个问题,每次关闭对话框再打开,之前填写的内容还在,怎么都清不掉... 我这样写的:在setup里用ref存表单值,关闭时手动设为空了啊: const di... 子荧~ 组件 2026-02-05 10:14:27 2 回答 146 浏览 TDesign按钮样式覆盖不了自定义CSS,怎么解决? 在用TDesign的Button组件时,我想给按钮加个圆角和背景渐变,但写好的CSS样式一直被覆盖。比如这个代码:.td-button-custom { border-radius: 20px !im... 端木怡然 组件 2026-01-31 10:47:26 1 回答 45 浏览 TDesign Input 绑定值后无法输入内容是怎么回事? 我用 TDesign 的 Input 组件绑定了一个响应式变量,但页面渲染后输入框没法输入任何内容,光标能聚焦但打字无效。是不是哪里写错了? 我试过直接修改 data 里的值,也试过用 ref,都不行... 程序员仙仙 组件 2026-03-16 17:46:19
margin-bottom: 20px对齐,建议用tdesign-form包裹控件,或者手动给输入框和按钮统一设置margin-bottom: 20px即可对齐。代码如下:
formColProps或者FormItem的栅格布局功能来控制间距,统一整个表单的布局节奏。比如这样:按规范走栅格系统,间距自然就对齐了,省心。