美文网首页
input 要输入内容就搜索,或者点击搜索图标搜索

input 要输入内容就搜索,或者点击搜索图标搜索

作者: 流泪手心_521 | 来源:发表于2020-10-28 14:28 被阅读0次

1.用watch监听一下input值的变化

    watch: {
      'searchParams.searchKey'() {
        utils.throttle(() => {
          this.searchCompany();
        }, 300);
      },
    }

//this.seatchCompany的方法

searchCompany() {
        this.searchParams.pageNo = 1;
        this.personList = [];
        this.getPersonList();
      },

3.this.getPersonList的方法

getPersonList() {
        let params = 'pageNo=' + this.searchParams.pageNo +
          '&pageSize=' + this.searchParams.pageSize +
          '&searchKey=' + this.searchParams.searchKey+
          '&position=' + this.tagItem;
        this.axios
          .get(API.company.companyData + '?' + params)
          .then((res) => {
            if (res.data.status == 0) {
              if(res.data.data.resultData.length === 0) {
                this.finishedText = "暂无数据";
              } else {
                this.finishedText = "没有更多了";
              }
              let oldList = JSON.parse(JSON.stringify(this.personList))
              let tempList = res.data.data.resultData.map((item, index) => {
                return Object.assign({}, item, {
                  photoPath: PATH_IMG + item.photoPath,
                });
              });
              this.personList = oldList.concat(tempList)
              this.loading = false
              if (res.data.data.totalPages > this.searchParams.pageNo) {
                this.finished = false;
                this.searchParams.pageNo += 1
              } else {
                this.finished = true;
              }
            } else {
              this.alert(res.data.message);
            }
          })
          .catch((err) => {
            this.alert(err);
          });
      },

4.html

<div class="search_box">
      <input class="search_input" type="text" v-model.trim="searchParams.searchKey" placeholder="输入姓名或企业名称">
      <div class="search_btn" @click="searchCompany">
        <img src="../../assets/img/search_icon.png" alt="search">
      </div>
    </div>

相关文章

网友评论

      本文标题:input 要输入内容就搜索,或者点击搜索图标搜索

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