vue输入框实现自动补全小功能

最新推荐文章于 2025-03-19 10:26:20 发布

one-皮卡丘

最新推荐文章于 2025-03-19 10:26:20 发布

阅读量1.5k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/SSLJY_YCFH/article/details/108734789

版权

vue 专栏收录该内容

12 篇文章

订阅专栏

简单方式

//     输入搜索补全框
  <el-select   filterable  v-model="form[item.name]" :filter-method="dataFilter" placeholder="" >
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
   </el-select>

 data() {
      return {
        optionsCopy: [
          {
            value: '0',
            label: '肖战'
          },
          {
          value: '1',
          label: '一搏'
        }, {
          value: '2',
          label: '凡凡'
        }],
       options: [
          {
            value: '0',
            label: '肖战'
          },
          {
          value: '1',
          label: '一搏'
        }, {
          value: '2',
          label: '凡凡'
        }],
        value: ''
      };
    }
  

```bash
   dataFilter(val) {
        this.value = val;
        if (val) { //val存在
          this.options = this.optionsCopy.filter((item) => {
            if (!!~item.label.indexOf(val) || !!~item.label.toUpperCase().indexOf(val.toUpperCase())) {
              return true
            }
          })
        } else { //val为空时，还原数组
          this.options = this.optionsCopy;
        }
      }