<el-select v-model="queueName" placeholder="选择队列名" filterable allow-create clearable style="width: 350px; margin: 10px" > <el-option v-for="item in queueNameList" :key="item.value" :label="item.label" :value="item.value" /> </el-select> 这个组件中为什么我选过就不能更改了
时间: 2024-02-10 21:33:07 浏览: 30
根据你提供的代码,我猜测可能是因为你在 `el-select` 组件中设置了 `clearable` 属性,这个属性会在选择了某个选项后,显示一个清除按钮,用来清除已经选择的选项。当你选择了一个选项后,这个选项就会变成当前选中状态,如果你想要更改选择,你需要首先点击清除按钮将已选择的选项清除,然后重新选择其他选项。如果你不想要这个清除按钮,可以将 `clearable` 属性设为 `false`。如果这不是你的问题所在,请提供更多的信息,我会尽力帮助你解决问题。
相关问题
<el-select multiple v-model="queueName" placeholder="选择队列名" filterable allow-create clearable style="width: 350px; margin: 10px" > <el-option v-for="item in queueNameList" :key="item.value" :label="item.label" :value="item.value" /> </el-select> 为什么我这el-select组件点击只能全选我要的是多选而不是全选啊
根据你提供的代码,点击下拉框选项会全选的原因可能是因为你在`<el-select>`组件中同时开启了`multiple`和`filterable`属性,这会导致下拉框中的选项被视为可搜索的,而在搜索框中输入任何内容都会匹配到所有选项,从而导致所有选项被选中。
如果你只想启用多选模式,可以将`filterable`属性移除,例如:
```
<el-select multiple v-model="queueName" placeholder="选择队列名" allow-create clearable style="width: 350px; margin: 10px">
<el-option v-for="item in queueNameList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
```
这样就只会启用多选模式,而不会开启搜索框。
我现在这样写 <el-select v-model="queueName50" placeholder="队列选择(50)(为空则全选)" multiple filterable allow-create clearable style="width: 300px; margin: 10px"> <el-option v-for="item in queueNameList[server50]" :key="item.nameWithIp" :label="item.label" :value="item"> </el-option> </el-select> 可是当我在选择框选择一项时所有项都点亮了,这是为什么 里
这个问题可能是因为您在`queueName50`中使用了`item`对象,而不是`item`对象的`name`或`value`。由于`el-select`在多选模式下,`v-model`绑定的是一个数组,数组中应该是每个选项的`value`值,而不是选项对象本身。您可以将`item`对象的`name`或`value`作为`value`绑定到`el-option`上,这样就能够正常选择了。具体代码如下:
```html
<el-select v-model="queueName50" placeholder="队列选择(50)(为空则全选)" multiple filterable allow-create clearable style="width: 300px; margin: 10px">
<el-option v-for="item in queueNameList[server50]" :key="item.nameWithIp" :label="item.label" :value="item.name"></el-option>
</el-select>
```
这里将`item`对象的`name`作为`value`绑定到了`el-option`上,这样就能够正常选择了。如果您需要使用`item`对象,可以在`el-select`的`@change`事件中处理选中项的变化,将选中的每个`value`值对应的`item`对象包装成一个新对象,然后更新`queueName50`的值。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)