elemenui的行内表单如何设置一行显示的个数
时间: 2024-04-29 10:22:38 浏览: 13
elemenui的行内表单默认每行显示3个表单项。如果需要修改,可以在el-form-item中使用属性span来设置每个表单项所占据的列数。例如,如果希望每行只显示2个表单项,可以设置span为12/2=6,如下所示:
```
<el-form>
<el-row>
<el-col :span="6">
<el-form-item label="姓名">
<el-input v-model="name"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="年龄">
<el-input v-model="age"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="性别">
<el-radio-group v-model="gender">
<el-radio label="male">男</el-radio>
<el-radio label="female">女</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="手机号">
<el-input v-model="phone"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
```
相关推荐
![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)