element input历史查询(模糊查询)以及防抖处理

素颜马尾好姑娘i 2022-11-19 04:01 116阅读 0赞

## **element input历史查询(模糊查询)以及防抖处理** ##

*在main.js里添加全局-----防抖处理*

Vue.prototype.debounce = function(fn, delay) {
    	//防抖
    	let timer = null; //声明一个timer
    	return function () {
    	  if (timer) {
    		//如果timer有值的话代码已经执行过了。执行了的话是不是要清空
    		clearTimeout(timer);
    	  }
    	  timer = setTimeout(() => {
    		fn.apply(null, arguments);
    	  }, delay); //如果没有的话代表还未在规定的时间内执行
    	};
      }

*  **html**

*  **js**

methods:{
    //---------------------------------------------
    //防抖处理
    	inputChange(name, callback) {
          this.debounce(this.querySearch(name, callback), 1000)
        },
        //查询搜索处理
        //身份证号码
        querySearch(name, callback) {
          this.restaurants = [];//重新定义，防止累加
          if (name != "" && name.length > 0) {
            //获取搜索数据
            this.$get(this.api.getIdCard, {
              IdCard: name,
            })
              .then((res) => {
                if (res.data == undefined) {
                  callback([
                    {
                      id: "暂无数据",
                      value: "暂无数据",
                    },
                  ]);
                } else {
                  res.data.forEach((item) => {
                    this.restaurants.push({
                      id: item.tp001,
                      value: item.tp004,
                    });
                  });
                  // 调用 callback 返回建议列表的数据,是一个数组类型
                  callback(this.restaurants);
                }
              })
              .catch((err) => {
                console.log(err);
              });
          }
        },
        handleSelect(e, item) {
        //根据选中的身份证号所属的id，查出这个人所有身份信息，回显
          this.$get(this.api.getPersonInfo, {
            tp001: e.id,
          })
            .then((res) => {
              if (res.data.tp001) {
                item.tp002 = res.data.tp002;
                item.tp003 = res.data.tp003;
                item.tp004 = res.data.tp004;
                item.tp006 = res.data.tp006;
                item.tp005 = res.data.tp005;
                item.tp007 = res.data.tp007;
                item.tp010 = res.data.tp010;
                item.tp008 = res.data.tp008;
                item.tp009 = res.data.tp009;
                item.tp011 = res.data.tp011;
              }
            })
            .catch((err) => {
              console.log(err);
            });
        },
    }
    //------------------------------------