element ui 用户名远程搜索

用户远程搜索组件

<template>

  <el-select v-model="valueTmp" filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethod" :loading="loading" clearable :disabled="disabled" @change="onchange" @clear="onClear">

    <el-option v-for="item in options" :key="item.id" :label="item.employeeCode+'-'+item.employeeName" :value="item.id">

    </el-option>

  </el-select>

</template>



<script>

import { getEmpSelect } from '@/api/human/employee'

export default {

  props: {

    disabled: {

      type: Boolean,

      default: false

    },

    value: {

      type: Number,

      default: null

    },

    //

    queryType: {

      type: Number,

      default: 0

    }

  },

  data() {

    return {

      valueTmp: null,

      options: [],

      loading: false

    }

  },

  watch: {

    value: {

      handler(val) {

        this.valueTmp = val

        this.$nextTick(()=>{

          if (val) {

            this.remoteMethod(null, val)

          } else {

            this.remoteMethod(null)

          }

        })

      }

    },

    valueTmp(val) {

      this.$emit('input', val)

    }

  },

  mounted() {

    this.remoteMethod()

  },

  methods: {

    remoteMethod(query, id) {

      if (query !== '') {

        this.loading = true;

        let req = {

          id: id,

          employeeName: query,

          queryType: this.queryType,

          pageNum: 1,

          pageSize: 20

        }

        getEmpSelect(req).then((rsp)=>{

          this.options = rsp.data

          this.loading = false;

        })

      } else {

        this.options = [];

      }

    },

    onchange(val) {

      let row = this.options.find(item=>item.id === val)

      this.$emit('change', val, row)

    },

    onClear() {

      this.$emit('input', null)

    }

  }

}

</script>

使用

<select-employee ref="empSelect" v-model="queryForm.maintenanceLeaderId" />