使用element做一个左边是选择器右边是input输入框,两个是合在一起的
时间: 2024-04-09 13:33:48 浏览: 106
你可以使用 Element UI 的 Form 组件来实现左边是选择器,右边是输入框的布局。以下是一个示例代码:
```html
<template>
<el-form>
<el-row>
<el-col :span="6">
<el-form-item label="选择器">
<el-select v-model="selectedOption" placeholder="请选择">
<el-option label="选项1" value="option1"></el-option>
<el-option label="选项2" value="option2"></el-option>
<el-option label="选项3" value="option3"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="18">
<el-form-item label="输入框">
<el-input v-model="inputValue" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
inputValue: ''
};
}
};
</script>
```
在上面的代码中,我们使用了 `el-row` 和 `el-col` 组件来创建左右布局。左侧使用了 `el-select` 组件作为选择器,右侧使用了 `el-input` 组件作为输入框。你可以根据需要自定义样式和调整布局。
阅读全文