怎么把el-input和el-select同一级
时间: 2023-07-24 07:17:27 浏览: 144
你可以使用 Element UI 提供的 `el-row` 和 `el-col` 组件,将 `el-input` 和 `el-select` 放在同一行中,例如:
```html
<template>
<el-row>
<el-col :span="12">
<el-input placeholder="请输入内容"></el-input>
</el-col>
<el-col :span="12">
<el-select placeholder="请选择">
<el-option label="选项1" value="1"></el-option>
<el-option label="选项2" value="2"></el-option>
<el-option label="选项3" value="3"></el-option>
</el-select>
</el-col>
</el-row>
</template>
```
其中,`:span` 属性表示列所占比例,这里设置为 12 表示每个列占据一半的宽度。你可以根据实际情况适当调整。
相关问题
el-form表单的el-input和el-select和el-date-picker的宽度一致
可以使用CSS中的flex布局来实现el-form表单中的各个表单项宽度一致。
具体实现方式如下:
1. 给el-form表单添加一个class,如.form-container。
2. 给每个表单项(el-input、el-select、el-date-picker等)添加一个class,如.form-item。
3. 使用flex布局,设置.form-container为display:flex,并设置flex-wrap:wrap。
4. 给.form-item添加flex:1,使各个表单项平均分配宽度。
以下是示例代码:
```
<template>
<el-form class="form-container">
<el-form-item class="form-item" label="姓名">
<el-input v-model="name"></el-input>
</el-form-item>
<el-form-item class="form-item" label="性别">
<el-select v-model="gender" placeholder="请选择">
<el-option label="男" value="male"></el-option>
<el-option label="女" value="female"></el-option>
</el-select>
</el-form-item>
<el-form-item class="form-item" label="出生日期">
<el-date-picker v-model="birthday" type="date" placeholder="请选择日期"></el-date-picker>
</el-form-item>
</el-form>
</template>
<style>
.form-container {
display: flex;
flex-wrap: wrap;
}
.form-item {
flex: 1;
}
</style>
```
el-select和el-input都在同一个el-form-item
可以将el-select和el-input放在同一个el-form-item中,这样可以将它们放在同一行中,代码如下所示:
```html
<el-form-item label="模板类型" prop="type">
<el-select v-model="templateForm.type" placeholder="请选择模板类型" style="width:100%;" @change="typeChange">
<el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
</el-select>
<el-input v-model="templateForm.input" placeholder="请输入内容" style="width:100%;" />
</el-form-item>
```
需要注意的是,如果el-select和el-input的宽度都设置为100%,则它们会平分一行,如果想要让其中一个元素占据更多的宽度,可以在对应元素上设置一个更大的宽度值。
阅读全文
相关推荐
















