Vue封装远程下拉框组件的实现示例

<template>
  <el-row>
    <el-select
        v-if="chooseFlag ==0"
        v-model="selectKey"
        :multiple="false"
        :filterable="true"
        :remote="true"
        @focus="selectFocus"
        :clearable="true"
        placeholder="请输入内容"
        :remote-method="remoteMethod"
        :loading="selectLoading">
      <el-option
          v-for="index in options"
          :key="index[key]"
          :label="index[labelValue]"
          :value="index[key]">
      </el-option>
    </el-select>
    <br>
    <br>
    <el-button @click="open" type="primary">点击查看key,value</el-button>
  </el-row>
</template>

<script>
export default {
  name: "RemoteSearch",
  data() {
    return {
      options: [],   //存储下拉框的数据
      selectKey: "",   //绑定的所选择的key
      selectEnterpriseForm: {},//发送数据
      selectLoading: false,
    }
  },
  props: {
    chooseFlag: {
      value: Number,
      default: 0,
    },
    labelValue: {
      type: String,
      default: "name",
    },
    key: {
      value: String,//key
      default: "id",
    },
    RequestUrl: { //获取数据的请求地址
      value: String,
      default: "/v1/teachers/findcourseNameByName",
    },
  },
  mounted() {
    console.log("mounted")
  },
  methods: {
    refreshData(){
      this.selectKey =""
    },
    selectEnterprise: function (query) {    //query用户搜索的值
      this.selectEnterpriseForm = this.$options.data().selectEnterpriseForm;   //清空数据
      this.selectEnterpriseForm.labelValue = query;
      this.axios({
        method: "POST",
        url: this.RequestUrl,
        data: this.$data.selectEnterpriseForm,
      }).then((res) => {
        let code = res.data.code;
        if (code == 200) {
          this.options = [];
          this.selectLoading = false;
         // this.addLoading = false;
          for (let i = 0; i < res.data.data.length; i++) {
            this.options.push({[this.labelValue]: res.data.data[i][this.labelValue], [this.key]: res.data.data[i][this.key]});
          }
        }
      }).catch((error) => {
        console.log(error);
      });
    },
    remoteMethod(query) {
      this.selectLoading = true;
      this.selectEnterprise(query);
    },
    selectFocus: function () {
      this.options = [];
      this.selectLoading = true;
      this.selectEnterprise("");
    },
    open: function () {
      alert("所选id为：" + this.selectKey)
    }
  }
}
</script>


<style scoped>

</style>

dataList.value = ?

<template>
  <div>
    <RemoteSearch :choose-flag="0" :auto-complete-column="name" ref="refreshData"></RemoteSearch>
    <el-button type="primary" @click="refreshChartSearch" style="margin-left: 10px">重置</el-button>
  </div>
</template>

<script>
import RemoteSearch from "@/components/select/RemoteSearch";
export default {
  components: {
    RemoteSearch
  },
  data(){
    return {
    }
  },
  methods:{
    refreshChartSearch(){
      this.$nextTick(() => {
        this.$refs.refreshData.refreshData();
        //DOM渲染完毕后就能正常获取了
      })
    },
  },
}
</script>

<style scoped>

</style>

placeholder="请输入内容"