select列表模糊搜索功能

2019-10-10  本文已影响0人  曹锦花
---------------------------template
                    <Select
                      filterable
                      remote
                      :remote-method="remoteMethod1"
                      :loading="loading1"
                      v-model="goodsId" style="width:200px">
                      <Option
                        v-for="(item,index) in membersArr"
                        :value="item.id"
                        :key="index"
                      >{{item.title}}</Option>
                    </Select>
-----------------------script
    data() {
      return {
        loading1: false, // 是否显示加载框
      }
    },
    methods: {
      // 礼物筛选的方法 query 查询的条件
      remoteMethod1(query) {
        // 调用查询的方法
        if (query !== '') {
          this.loading1 = true
          setTimeout(() => {
            this.loading1 = false;
            const list = this.membersArr.map(item => {
              return item;
            });
            this.options1 = membersArr.filter(item => item.label.toLowerCase().indexOf(query.toLowerCase()) > -1);
          }, 200);
        } else {
          this.membersArr = []
        }
      },
    }
上一篇 下一篇

猜你喜欢

热点阅读