### 调整 vxe-form-item 的行间距以使其更紧密 为了使 `vxe-form-item` 的行间距更加紧凑，可以通过以下方法实现： #### 1. 减小默认的垂直间距 通过覆盖默认的 CSS 样式，可以减小 `.vxe-form--item` 的 `margin-bottom` 值。例如，将默认的间距从 16px 减少到 8px[^1]。 ```css /* 减小表单项之间的垂直间距 */ .vxe-form--item { margin-bottom: 8px; /* 自定义更紧凑的垂直间距 */ } ``` #### 2. 使用 `size` 属性设置更紧凑的尺寸 `vxe-form-item` 提供了 `size` 属性，允许开发者选择不同的尺寸（如 `medium`、`small`、`mini`）。较小的尺寸会自动调整组件的间距和高度[^1]。 ```vue <template> <vxe-form :data="formData" size="mini"> <vxe-form-item title="字段名称" field="field1"> <vxe-input v-model="formData.field1"></vxe-input> </vxe-form-item> </vxe-form> </template> <script> export default { data() { return { formData: { field1: '' } }; } }; </script> ``` #### 3. 自定义插槽调整布局 如果需要进一步自定义表单项的布局，可以通过插槽功能完全控制标签和内容区域的样式。例如，减少标签与输入框之间的水平间距[^1]。 ```vue <template> <vxe-form :data="formData"> <vxe-form-item> <template #title> <span style="margin-right: 5px;">字段名称</span> <!-- 减小水平间距 --> </template> <template #default> <vxe-input v-model="formData.field1" style="width: 150px;"></vxe-input> </template> </vxe-form-item> </vxe-form> </template> <script> export default { data() { return { formData: { field1: '' } }; } }; </script> ``` #### 4. 全局配置样式 如果希望在整个项目中统一应用更紧凑的行间距，可以在全局样式文件中定义相关的样式变量[^1]。 ```scss /* 全局调整 vxe-form-item 的行间距 */ $--form-item-vertical-gap: 8px; /* 自定义更紧凑的垂直间距 */ .vxe-form--item { margin-bottom: $--form-item-vertical-gap; } ``` #### 注意事项 - 在覆盖默认样式时，确保优先级足够高以避免被其他样式覆盖。 - 如果使用了 scoped CSS，在 Vue 组件中可能需要借助深度选择器（如 `/deep/` 或 `::v-deep`）来应用样式。