filter-method导致无限调用接口

filter-method

在这里插入图片描述
建议换一个方式,去实现

el-select的filter-method是用来自定义筛选选项的方法。它接受一个函数作为参数,该函数在每次选项被过滤时被调用filter-method函数接收两个参数:第一个参数是当前输入的关键字,第二个参数是当前选项。函数需要返回一个布尔值,用于判断该选项是否符合过滤条件。 下面是一个示例: ```html <template> <div> <el-select v-model="selectedOption" filterable :filter-method="filterOptions"> <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option> </el-select> </div> </template> <script> export default { data() { return { selectedOption: '', options: [ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }, { value: '4', label: 'Option 4' } ] } }, methods: { filterOptions(input, option) { // 过滤条件为选项的label包含输入的关键字 return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0; } } } </script> ``` 上述示例中,我们使用了el-select组件,并开启了filterable属性,使得下拉选项可过滤。我们通过设置filter-method属性为filterOptions方法来自定义过滤选项的方式。 filterOptions方法中,我们通过判断选项的label是否包含了输入的关键字来决定该选项是否显示。如果包含了关键字,返回true,否则返回false。 这样,当我们在el-select中输入关键字时,只有包含该关键字的选项会被显示出来,其他选项则会被过滤掉。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值