elementUi select

Question

<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，它会在输入值发生变化时调用，参数为当前输入值。

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

Answer 1

测试完全可以，编辑了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的数组用来动态根据输入的值来改变

Answer 2

谢谢兄贵帮忙，这个改对了，因为我不太熟悉filter方法就很原始的这么写到是也行，楼主可以参考一下

<el-select v-model="helper_id" filterable placeholder="请选择" class="select-class" :filter-method="getStaff">
      <el-option
        v-for="item in all_staff"
        :key="item.id"
        :label="item.name"
        :value="item.id">
      </el-option>
</el-select>
data: function () {
      return {
        helper_id: '',
        all_staff: [{
          name: '怎么会|zmhZMH',
          id: '516021918965'
        },
        {
          name: '硬盘盒|yphYPH',
          id: '516021910567'
        },
        {
          name: '手机膜|sjmSJM',
          id: '516021915695'
        }],
        all_staff_backup: [{
          name: '怎么会|zmhZMH',
          id: '516021918965'
        },
        {
          name: '硬盘盒|yphYPH',
          id: '516021910567'
        },
        {
          name: '手机膜|sjmSJM',
          id: '516021915695'
        }]
      }
    }，
    methods: {
      getStaff (val) {
        if (val) {
          var length = this.all_staff_backup.length
          var tempArr = []
          for (var i = 0; i < length; ++i) {
            if (this.all_staff_backup[i].name.indexOf(val) > -1) {
              tempArr.push(this.all_staff_backup[i])
            }
          }
          this.all_staff = tempArr
        } else {
          this.all_staff = this.all_staff_backup
          this.helper_id = ''
        }
        console.log(val)
      }
    }

Answer 3

你好，请问你的这个在ie上或者360上能搜索吗？我没有你这样的需求，没有用filter-method，就是普通的搜索value，但是在ie上的输入框，不能输入，急求……thanks