element-plus远程搜索

1，准备模板

<el-select
        v-model="queryInfo.vin"
        :filterable="true"
        :remote="true"
        reserve-keyword
        placeholder="请输入车架号"
        :remote-method="remoteMethod"
        :loading="loading"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

2，js逻辑部分

 async queryVehicle() {
      const { data: res } = await queryVehicle(this.queryInfo2);
      res.forEach((item) => {
        //this.states:需要搜索的数据
        this.states.push(item.vin);
      });
        //this.list对原始数据做统一处理
      this.list = this.states.map((item) => {
        return { value: `${item}`, label: `${item}` };
      });
    },
 remoteMethod(query) {
      if (query) {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
        //输入关键词后显示的列表
          this.options = this.list.filter((item) => {
            return item.label.toLowerCase().includes(query.toLowerCase());
          });
        }, 200);
      } else {
        this.options = [];
      }
    },

最后

以上就是陶醉奇迹为你收集整理的element-plus远程搜索的全部内容，希望文章能够帮你解决element-plus远程搜索所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。