一个el-form-item里 怎么放两个input
时间: 2023-12-14 17:00:06 浏览: 187
在一个 `el-form-item` 中放置两个 `input` 可以使用 `el-row` 和 `el-col` 的组合来实现。你可以将 `el-row` 作为 `el-form-item` 的直接子元素,然后在 `el-row` 中放置两个 `el-col` ,每个 `el-col` 再放置一个 `input`。
下面是一个示例代码:
```html
<template>
<el-form>
<el-form-item label="用户名">
<el-row>
<el-col :span="12">
<el-input v-model="username1"></el-input>
</el-col>
<el-col :span="12">
<el-input v-model="username2"></el-input>
</el-col>
</el-row>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
username1: '',
username2: ''
};
}
};
</script>
```
在这个示例中,我们创建了一个 `el-form-item` ,并在其中创建了一个 `el-row` 。然后我们创建了两个 `el-col` ,每个 `el-col` 中都放置了一个 `el-input` 。两个 `el-col` 的 `span` 属性都设置为 `12` ,这样它们就会平分 `el-row` 的宽度,从而实现在同一行中放置两个 `input` 的效果。
阅读全文