el-form-item组件里的input水平分布
时间: 2023-08-30 19:06:29 浏览: 49
要将 `el-form-item` 组件里的 `input` 水平分布,可以使用 `el-form` 组件中的 `label-width` 和 `label-position` 属性以及 `el-form-item` 组件中的 `prop` 属性和 `label` 描述属性。
具体方法如下:
1. 首先,在 `el-form` 组件中设置 `label-width` 属性为一个较小的值,例如 `80px`,这样可以让 `label` 描述文本的宽度变小,腾出更多的空间给 `input` 元素。
2. 然后,在 `el-form` 组件中设置 `label-position` 属性为 `left`,这样 `label` 描述文本将显示在 `input` 元素左侧。
3. 在 `el-form-item` 组件中,设置 `prop` 属性为当前表单项所对应的数据属性名,例如 `prop="username"`。
4. 在 `el-form-item` 组件中,设置 `label` 描述属性为当前表单项的标签文本,例如 `label="用户名"`。
5. 最后,在 `el-form-item` 组件中,使用 `el-input` 组件来渲染 `input` 元素,并设置 `size` 属性为 `medium` 或 `small`,这样 `input` 元素大小会变小,适应水平分布的场景。
示例代码如下:
```
<el-form label-width="80px" label-position="left">
<el-form-item prop="username" label="用户名">
<el-input size="medium"></el-input>
</el-form-item>
<el-form-item prop="password" label="密码">
<el-input size="medium"></el-input>
</el-form-item>
</el-form>
```
这样,`input` 元素就会水平分布,且 `label` 描述文本会显示在 `input` 元素左侧。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)