防抖函数

debounce.vue

<template>
  <Select
    :loading="loading"
    :remote-method="remoteMethod"
    filterable
    clearable
    placeholder="请选择部门"
    remote
    style="width:300px;"
    v-model="value"
  >
    <Option :key="index" :value="option.id" v-for="(option, index) in selection">{{option.fullname}}</Option>
  </Select>
</template>
<script>
import utils from '@/utils';

export default {
  name: 'selectDepart',
  props: {
    nodeid: Number,
  },
  data() {
    return {
      value: '',
      selection: [],
      loading: '',

      // 防抖函数
      debounceMethod: null,
    };
  },
  methods: {
    remoteMethod(query) {
      if (query === '') {
        return;
      }
      this.debounceMethod(query)
    },
    searchPart(query) {
      let data = {
        keyword: query,
        site_type: 1,
      };

      this.loading = true;
      this.$store
        .dispatch('ajaxGet', {
          url: '/v1.0/rbac/search_resource',
          params: data,
        })
        .then(res => {
          if (res.status == 200) {
            this.loading = false;
            let objRes = res.data;
            console.log(objRes);
            this.selection = [];
            this.$nextTick(() => {
              this.selection = objRes.data;
            });
          }
        });
    },
  },
  mounted() {
    // 防抖操作，避免输一个字符就查询一下接口
    this.debounceMethod = utils.debounce(username => {
      this.searchPart(username);
    }, 500);
  },
  watch: {
    value(newVal) {
      this.$emit('update:nodeid', Number.parseInt(newVal));
    },
  },
};
</script>