GEAR-OA/gear-ui3/src/components/CustomerSelect/index.vue

<template>
  <el-select filterable v-model="_customerId" remote :remote-method="remoteSearchCustomer" :loading="customerLoading" placeholder="请选择客户">
    <el-option v-for="item in customerList" :key="item.customerId" :label="item.name" :value="item.customerId" />
  </el-select>
</template>

<script>
  import { listCustomer } from '@/api/oms/customer';

  export default {
    name: 'CustomerSelect',
    props: {
      value: {
        type: String,
        default: ''
      }
    },
    computed: {
      _customerId: {
        get() {
          return this.value;
        },
        set(value) {
          this.$emit('input', value);
        }
      }
    },
    data() {
      return {
        customerList: [],
        customerLoading: false
      }
    },
    mounted() {
      this.remoteSearchCustomer('');
    },
    methods: {
      remoteSearchCustomer(query) {
        this.customerLoading = true;
        listCustomer({ name: query, pageNum: 1, pageSize: 10 }).then(response => {
          this.customerList = response.rows;
        }).finally(() => {
          this.customerLoading = false;
        });
      }
    }
  }
</script>