vue+element-ui做的前端模糊查询

最新推荐文章于 2025-03-22 08:00:00 发布

原创最新推荐文章于 2025-03-22 08:00:00 发布

· 345 阅读

0 ·

版权

文章标签：

#前端 #ui #vue.js

vue 专栏收录该内容

8 篇文章

订阅专栏

template模板代码：

<el-select
   v-model="selectedValue"
   @change="handleSelect"
   filterable
     placeholder="请搜索选择信号名称"
     :filter-method="remoteMethod">
      <el-option
         v-for="item in options"
          :key="item.id"
          :label="item.signalName"
           :value="item.seqNo">
      </el-option>
</el-select>

data里面定义

signalList:[],
options: [],
selectedValue: '',

methods方法：

remoteMethod(query) {
    if (query !== '') {
      this.loading = true;
      setTimeout(() => {
            this.loading = false;
            this.options = this.signalList.filter(item => {
              return item.signalName.toLowerCase()
                .indexOf(query.toLowerCase()) > -1;
            });
          }, 200);
        } else {
          this.options = [];
          this.selectedValue = '';
        }
},