vue3 解决el-select加上filterable, 无数据设置no-data-text="暂无数据"失效问题
时间: 2024-03-02 21:53:28 浏览: 64
当el-select加上filterable属性时,no-data-text属性可能会失效。这是因为当输入框有值时,el-select会根据输入框的值进行筛选,而不是直接显示no-data-text属性的文本。
要解决这个问题,可以通过监听el-select的输入事件,在输入框有值时隐藏no-data-text属性的文本。例如:
```
<template>
<el-select v-model="value" filterable @input="handleInput">
<el-option label="选项1" value="1"></el-option>
<el-option label="选项2" value="2"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
value: '',
isFiltering: false
}
},
methods: {
handleInput() {
this.isFiltering = true
}
},
computed: {
noDataText() {
if (this.isFiltering) {
return ''
} else {
return '暂无数据'
}
}
}
}
</script>
```
在这个例子中,我们新增了一个isFiltering属性来记录当前是否正在筛选,以便在计算属性noDataText中判断是否显示no-data-text属性的文本。当输入框有值时,我们通过handleInput方法将isFiltering设为true,这时计算属性会返回空字符串,从而隐藏no-data-text属性的文本。当输入框没有值时,计算属性会返回'暂无数据',从而显示no-data-text属性的文本。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)