美文网首页
select列表模糊搜索功能

select列表模糊搜索功能

作者: 曹锦花 | 来源:发表于2019-10-10 11:43 被阅读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 = []
        }
      },
    }

相关文章

网友评论

      本文标题:select列表模糊搜索功能

      本文链接:https://www.haomeiwen.com/subject/mzpopctx.html