el-form-item 一行中放两个el-input
时间: 2024-08-29 19:01:08 浏览: 142
Vue中el-form标签中的自定义el-select下拉框标签功能
`el-form-item` 是 Element UI 中的一个表单组件,用于组织并验证表单字段。如果你想在一个 `el-form-item` 里放置两个 `el-input`,可以这样做:
```html
<el-form-item label="标签1">
<div style="display: flex; direction: row;">
<el-input v-model="input1Value" placeholder="输入1"></el-input>
<el-input v-model="input2Value" placeholder="输入2"></el-input>
</div>
</el-form-item>
```
在这个示例中,我们使用了 CSS 的 `flex` 布局模式,将两个 `el-input` 放置在同一行内,通过设置 `display: flex` 和 `direction: row` 来控制元素排列。`v-model` 指定了输入框的数据绑定,`placeholder` 属性则显示提示文字。
如果你需要更高级的布局定制,还可以使用 Vue.js 的插槽(slots)来动态插入内容:
```html
<el-form-item label="标签1">
<template #default>
<div>
<el-input v-model="input1Value" slot="innerInput1"></el-input>
<el-input v-model="input2Value" slot="innerInput2"></el-input>
</div>
</template>
</el-form-item>
```
然后在外部模板中,你可以分别给每个输入框添加特定的样式或其他功能。
阅读全文