vue中节流函数实现搜索数据

Posted 2021-03-02 smart-girl

在日常开发中有很多场景我们都需要用到节流函数和防抖函数，比如：实现输入框的模糊查询因为需要轮询ajax，影响浏览器性能，所以需要用到节流函数；实现手机号、姓名之类的的验证，往往我们只需要验证一次，这个时候我们就需要用到防抖函数；但是网上的很多资料都是不够具体和便于理解。
基本代码如下

 <el-input placeholder="请输入搜索内容" suffix-icon="el-icon-search" class="searchItem searchInput" v-        
    model.trim="keyword">
</el-input>
     <div class="taskList">
        <el-table ref="multipleTable" :data="userListData.rows" id="taskList" tooltip-effect="dark" v-loading="loading" element-loading-text="数据加载中" element-loading-background="rgba(0, 0, 0, 0.6)" style="width: 100%" border fit stripe>
          <el-table-column type="index" :index="indexMethod" label="序号" width="60">
          </el-table-column>
          <el-table-column prop="name" label="名称" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="address" label="地址" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="phone" label="电话" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="principal" label="负责人" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="success" size="small" plain @click="goDetail(scope.row.id)" v-if="menus.USER_CUST_VIEW">查看</el-button>
              <!-- <el-button type="primary" size="small" plain @click="goUrl(`/zz/editUser/u/${scope.row.userId}`)">编辑</el-button> -->
              <el-button type="danger" size="small" plain @click="removeUser(scope.row.id)" >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="userListData.pageNumber" :page-sizes="[10,20,30, 50]" :page-size="userListData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="userListData.total">
        </el-pagination>
      </div>

基本代码如下

import _ from ‘lodash‘
export default{
    computed:{
searchContent() {
      return this.keyword
    },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    searchContent: function(newQuestion, oldQuestion) {
      this.userListData.pageNumber = 1
      this.getAccountUserListDebounce()
    }
  },
    getAccountUserListDebounce: _.debounce(
      function() {
        this.getList()
      },
      // 这是我们为判定用户停止输入等待的毫秒数
      500
    ),
    getList() {
      this.loading = true
      mytomer(this.keyword, this.userListData.pageSize, this.userListData.pageNumber, null).then(res => {
        this.loading = false
        this.userListData.total = res.data.total
        this.userListData.rows = res.data.rows
      }).catch(error => {
        this.loading = false
      })
    },

}

}