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的数组用来动态根据输入的值来改变

回答:

谢谢兄贵帮忙,这个改对了,因为我不太熟悉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)
      }
    }

回答:

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注