vue组件封装 - 选择器远程搜索下拉列表

<!--
  * component:人员选择 - 远程搜索下拉列表
  * time:2023/7/19
  * author:zx

  * 使用方式
  * import PersonSelect from "@/components/Dialog/personSelect.vue";
  * components: { PersonSelect }
  * <person-select v-model="test"/>
-->
<template>
    <div class="RangeSearch">
      <el-select
        v-model="personnelData"
        filterable
        clearable
        @change="selectValveApi"
        placeholder="请选择">
        <el-option
          v-for="item in userOptions"
          :key="item.dictValue"
          :label="item.dictLabel"
          :value="item.dictValue">
        </el-option>
      </el-select>
    </div>
  </template>

  <script>
  import { selectUserEnum } from "@/api/system/user";//用户列表
  export default {
    data(){
      return{
        userOptions: [],
        personnelData:'',
      }
    },
    props:{
      // 占位符
      placeholder:{
        default(){
          return 'Please_enter_customer_ID';
        }
      },
      //  是否多选
      multiple:{
        default(){
          return false;
        }
      },
      //  多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词
      reserveKeyword:{
        default(){
          return false;
        }
      },
    },
    created() {
      this.selectUserEnum();
    },
    methods:{
    //   选择下拉框赋值
      selectValveApi(){
        // this.$emit('update:input',this.personnelData)
        this.$emit('input',this.personnelData)
      },
      /** 查询用户列表 */
      selectUserEnum() {
        selectUserEnum().then(response => {
          this.userOptions = response.data;
        });
      },
    },
  }
  </script>

  <style>

  </style>