el-select 遮挡el-input
时间: 2023-11-11 13:04:49 浏览: 89
当使用element-ui的el-select组件时,如果在el-select中使用了el-input组件,可能会出现箭头符号被el-tag遮挡的情况。此时可以通过调整样式来解决这个问题,具体方法可以参考引用中的代码。其中,需要调整箭头符号块的宽度和箭头符号的位置,以及调整输入框的宽高和多选不换行等。另外,如果需要在el-select中使用el-input组件,可以在el-select标签中加上class="selects",并在样式中对该class进行调整,具体方法可以参考引用中的代码。
相关问题
vue el-select el-input 联动
vue中的el-select和el-input可以通过v-model进行双向绑定,实现联动效果。具体实现步骤如下:
1. 为el-select组件添加v-model属性,绑定一个选中的值;
2. 为el-input组件添加v-model属性,绑定需要联动的值;
3. 监听el-select的change事件,将选中的值赋值给绑定的值;
4. 在el-input组件中通过计算属性computed获取el-select的选中值,并实时更新联动的值。
下面是实现代码:
```
<template>
<div>
<el-select v-model="selectedValue" @change="handleChange">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-input v-model="inputValue"></el-input>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' }
],
selectedValue: '',
inputValue: ''
}
},
methods: {
handleChange() {
this.inputValue = this.selectedValue;
}
},
computed: {
selectedValue: {
get() {
return this.selectedValue;
},
set(value) {
this.selectedValue = value;
this.inputValue = value;
}
}
}
}
</script>
el-select中嵌套el-input
el-select中嵌套el-input可以通过设置z-index属性来解决组件层级关系的问题。首先,给父级容器.wrapper设置相对定位,然后给内容容器.content设置相对定位,并将其z-index属性设置为1,这样就可以将内容容器置于其他组件之上。这样做可以解决element-ui组件嵌套太多层导致内部的el-input和el-select等组件无法正常输入的问题。
以下是一个示例代码:
```html
<template>
<div class="wrapper">
<el-select>
<el-option label="Option 1" value="1"></el-option>
<el-option label="Option 2" value="2"></el-option>
</el-select>
<div class="content">
<el-input></el-input>
</div>
</div>
</template>
<style>
.wrapper {
position: relative;
}
.content {
position: relative;
z-index: 1;
}
</style>
```
这样设置后,el-input组件将显示在el-select组件之上,可以正常输入内容。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)