el-form-item如何设置el-input和el-button同行
时间: 2023-12-06 08:35:20 浏览: 257
el-table,el-form在vue中封装组件化,含操作按钮和插槽.pdf
5星 · 资源好评率100%
可以使用flex布局来实现el-input和el-button同行。具体方法是在el-form-item标签上添加一个class,然后在该class中设置display为flex,并且设置flex-wrap为nowrap,这样el-input和el-button就可以在同一行显示了。以下是示例代码:
```html
<el-form-item label="类别" prop="type" :rules="typeRules" class="form-item-inline">
<el-input></el-input>
<el-button>按钮</el-button>
</el-form-item>
```
```css
.form-item-inline {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
```
阅读全文