alhj-admin/src/components/AcceptorSelect/AcceptorSelect.vue

<template>
  <el-select
    :value="value"
    filterable
    remote
    placeholder="请输入关键词"
    :loading="loading"
    :remote-method="remoteMethod"
    clearable
    @change="onChange"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.acceptorName"
      :value="item.id"
    />
  </el-select>
</template>

<script>
import { acceptorSearchApi } from '@/api/contracts'
export default {
  name: 'AcceptorSelect',
  props: {
    value: {
      type: [String, Number, Array],
      default: undefined
    }
  },
  data() {
    return {
      filter: {
        status:1, // 已删除的承兑人不展示
        pageIndex: 1,
        pageSize: 100
      },
      options: [],
      loading: false
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData(filter = {}) {
      const params = {
        ...this.filter,
        ...filter
      }
      this.loading = true
      acceptorSearchApi(params).then(res => {
        const result = res.data.result
        this.options = result
        this.loading = false
				console.log(res)
      }).catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    remoteMethod(query) {
      this.loadData({ name: query })
    },
    onChange(value) {
      this.emitInput(value)
    },
    emitInput(value) {
      const exist = this.options.find((o) => o.id === value)
      this.$emit('input', value)
      this.$emit('change', value, exist)
    }
  }
}
</script>