el-select 多选框回显时有数据,但是数据没有显示在输入框当中
时间: 2023-08-11 09:29:05 浏览: 262
可能是你的 el-select 组件的 multiple 属性没有设置为 true。请确保你的 el-select 组件的代码类似于以下代码:
```
<el-select multiple v-model="selectedItems">
<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
```
其中,multiple 属性设置为 true,selectedItems 是用来绑定选中项的数组,在选中项改变时可以在该数组中获取选中的值。
如果你的代码已经设置了 multiple 属性为 true,但是依然无法回显数据,那可能是你的数据格式不正确或者数据绑定有误。请检查你的数据格式,确保数据格式正确并且数据绑定正确。
相关问题
<el-select style="width: 725px" v-model="temp.researcherAndFundManagerSelect" size="small" collapse-tags=false multiple filterable clearable class="filter-item w-200" placeholder="请选择" > <el-option v-for="item in researcherAndFundManagerList" :key="item.id" :label="item.name" :value="item.id" /> </el-select> 数据下拉框回显时可以选中,但是数据label不显示在输入框当中
从你的代码中可以看出,你已经设置了 `collapse-tags` 属性为 `false`,并且也设置了 `multiple` 属性,所以问题很可能出在 CSS 样式上。
可以尝试在 CSS 样式中添加以下样式:
```
.el-select .el-tag {
margin-right: 5px;
}
```
这样可以保证选中的标签之间有一定的间距,并且在选中标签后,也会出现在输入框当中。
如果问题依然存在,还需要检查以下可能的原因:
1. `el-select` 样式被覆盖,可以通过浏览器的开发者工具检查 `el-select` 的样式是否存在或者是否被其他样式覆盖。
2. `el-select` 组件的数据绑定和渲染有问题,可以检查 `researcherAndFundManagerList` 中数据的格式是否正确,并且在选中后是否正确地更新了 `temp.researcherAndFundManagerSelect` 数组。
希望这些提示能够帮助你解决问题。
el-select选择后不回显
el-select是一款基于Element UI框架开发的下拉选择器组件,常用于页面的筛选、过滤等功能。如果在使用el-select时,选择了选项但却无法回显显示在输入框中,那么可能存在以下几种原因:
1. 未设置v-model绑定数据
使用el-select需要设置数据的双向绑定,即使用v-model指令将数据绑定到组件上。如果没有设置v-model,则无法保存选择的值到数据,也就无法回显。因此,需要在代码中添加一个v-model指令,将选择的值绑定到data中。
2. 数据类型不匹配
如果v-model绑定的数据类型与el-select选项的值类型不匹配,也会导致无法回显。例如,在data中定义了一个字符串类型的变量,但是el-select的选项值为数字类型。这时,需要将数据类型进行转换,或者使用相同类型的数据。
3. 自定义模板问题
如果使用了自定义模板切换选项,可能存在回显问题。在使用自定义模板时,需要注意模板中的v-model绑定问题,确保数据的正确性。
总之,当el-select选择后不回显时,需要检查代码中是否设置了v-model指令,绑定的数据类型与选项的值类型是否匹配,以及自定义模板是否存在绑定问题等。只有确保这些问题都排除后,才能正常显示选择的值。
阅读全文