zfire-newmall-admin/src/components/Remote/index.vue

<template>
  <div>
    <el-select
      @change="changeFn"
      v-model="value"
      filterable
      remote
      reserve-keyword
      placeholder="请输入工程师名称"
      :remote-method="remoteMethod"
      :loading="loading"
      style="width: 100%"
    >
      <el-option v-for="(v, i) in dataList" :key="i" :value="v.workerId" :label="v.workerName">
     <span>{{ v.workerName }}</span>  <span>{{ v.workerId }}</span>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  props: {
    remoteFn: {
      type: Function
    }
  },
  data() {
    return {
      value: '',
      dataList: [],
      loading: false
    }
  },
  created() {},
  methods: {
    changeFn(value) {
      this.dataList.forEach(v => {
        if (v.workerId === this.value) {
          this.$emit('change', v)
        }
      })
    },
    //获取工程师数据
    async getData(query) {
      let params = {
        pageNum: 1,
        pageSize: -1,
        params: [{ compare: 'like', createTime: '', param: 'a.worker_name', value: query }]
      }
      let { data } = await this.remoteFn(params)
      this.dataList = data.records
    },
    //
    async remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        await this.getData(query)
        this.loading = false
      } else {
        this.dataList = []
      }
    }
  }
}
</script>

<style></style>