el-select clearable
时间: 2024-06-02 20:06:13 浏览: 21
el-select是一个基于element-ui组件库实现的下拉选择框组件,而clearable则是el-select的一个属性,表示是否显示清空已选项的按钮。当该属性设置为true时,在el-select右侧会出现一个清空按钮,点击该按钮即可清空已选项。如果该属性设置为false或者不设置,则不会出现清空按钮。需要注意的是,只有当el-select的multiple属性设置为true时,才有清空按钮的显示。
相关问题
el-select clearable不生效
回答: 引用\[1\]中的代码中,使用了this.$forceUpdate()来重新渲染页面,以解决el-select clearable不生效的问题。\[1\]中的代码中,当下拉框重新选择时,页面下拉框的值没有变化,这是因为render函数没有自动更新,数据刷新了但是视图没有刷新。通过使用this.$forceUpdate()方法,可以强制刷新页面,使得下拉框的值能够正确展示。\[2\]和\[3\]中也提到了类似的解决方法,即通过强制刷新页面来解决el-select clearable不生效的问题。
#### 引用[.reference_title]
- *1* *2* [element-ui 解决 el-select 设置初始默认值后切换选项无效问题](https://blog.csdn.net/sea9528/article/details/121403975)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [element-ui的下拉选择框选中内容无效果,删除无效果](https://blog.csdn.net/Fray_Zyt/article/details/123428415)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
<el-select clearable filterable v-model.lazy="scope.row.supplier_id"> <el-option v-for="sup in supList" :key="sup.supplier_id" :label="sup.supplier_name" :value="sup.supplier_id"> </el-option> </el-select>如何使用虚拟渲染
可以在 el-select 标签上添加一个属性 virtual-scroll,它的值为 true,表示开启虚拟滚动。此外,还可以添加其他的虚拟滚动相关的属性,如 item-height 表示每一项的高度,如果每一项的高度不一致,可以使用一个函数返回每一项的高度。代码如下:
```
<el-select clearable filterable v-model.lazy="scope.row.supplier_id" virtual-scroll :item-height="40">
<el-option v-for="sup in supList" :key="sup.supplier_id" :label="sup.supplier_name" :value="sup.supplier_id">
</el-option>
</el-select>
```
在使用虚拟渲染后,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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)