vue.js - elementUi select

问题描述

问 题

<template>
<el-select v-model="value8" filterable placeholder="请选择">

<el-option
  v-for="item in options"
  :key="item.value"
  :label="item.label"
  :value="item.value">
</el-option>

</el-select>
</template>

这里的filterable 是通过label 来搜索的，我想让label和value都可以作为索引值来搜索。

为el-select添加filterable属性即可启用搜索功能。默认情况下，Select 会找出所有label属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个filter-method来实现。filter-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。

上面是文档说的，但是我不太明白，求大神解释下

解决方案

测试完全可以，编辑了4次 不好意思

<template>
    <el-select v-model="value" placeholder="请选择" filterable :filter-method="test">
         <el-option v-for="item in options" :key="item.value" :label="item.label :value="item.value">
          </el-option>
    </el-select>
</template>

js

data() {
    return {
        options: [{       //v-model数组 
            value: '选项1',
            label: '黄金糕'
        }, {
            value: '选项2',
            label: '双皮奶'
        }, {
            value: '选项3',
            label: '蚵仔煎'
        }, {
            value: '选项4',
            label: '龙须面'
        }, {
            value: '选项5',
            label: '北京烤鸭'
        }],
        backUpArr:[{   //备份数组
            value: '选项1',
            label: '黄金糕'
        }, {
            value: '选项2',
            label: '双皮奶'
        }, {
            value: '选项3',
            label: '蚵仔煎'
        }, {
            value: '选项4',
            label: '龙须面'
        }, {
            value: '选项5',
            label: '北京烤鸭'
        }]
}
    
methods: {
    test(val){
        if (val) { //val存在 
            this.options = this.backUpArr.filter((item) => {
                if (!!~item.label.indexOf(val) || !!~item.value.indexOf(val)) {
                    return true
                }
            })
        } else { //val为空时，还原数组
            this.options = this.backUpArr
        }
    }
}

filterable 和 filter-method要同时用，然后在方法里定义一个filter-method的函数,比如test，在test里操作当前的v-model的数组，但是 开始的时候你应该要要备份当前数组，把v-molde的数组用来动态根据输入的值来改变

这篇关于vue.js - elementUi select的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！