Vue封裝遠程下拉框組件的實現(xiàn)示例

更新時間：2022年07月26日 09:16:26 作者：nianyuw

本文主要介紹了Vue封裝遠程下拉框組件的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

之前封裝了一個遠程搜索的輸入框，靜態(tài)在Vue官網(wǎng)看到一個類似的遠程搜索下拉框，今天也封裝一個遠程搜索下拉框，面對不同的需求

我們修改了官方提供的代碼來封裝了

父組件

RemoteSearch.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: [],   //存儲下拉框的數(shù)據(jù)
      selectKey: "",   //綁定的所選擇的key
      selectEnterpriseForm: {},//發(fā)送數(shù)據(jù)
      selectLoading: false,
    }
  },
  props: {
    chooseFlag: {
      value: Number,
      default: 0,
    },
    labelValue: {
      type: String,
      default: "name",
    },
    key: {
      value: String,//key
      default: "id",
    },
    RequestUrl: { //獲取數(shù)據(jù)的請求地址
      value: String,
      default: "/v1/teachers/findcourseNameByName",
    },
  },
  mounted() {
    console.log("mounted")
  },
  methods: {
    refreshData(){
      this.selectKey =""
    },
    selectEnterprise: function (query) {    //query用戶搜索的值
      this.selectEnterpriseForm = this.$options.data().selectEnterpriseForm;   //清空數(shù)據(jù)
      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>

vue的參數(shù)是可以通過封裝在props內，被其他界面引用

注意：

一：js中在調用json格式數(shù)組的值的時候——有兩種形式

以下為dataList數(shù)組

形式一：dataList[0].name

形式二：dataList[0][name]

在有些時候會把**.變量**識別成調用，所以在一些情況下使用第二個效果更好

js的數(shù)組手動設置值(給dataList設置一個value值)

dataList.value = ?

以下為引用的vue界面

<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>

只需要通過import導入對應的組件，通過components來調用，并通過類似標簽的形式來聲明

子組件通過父組件提供的props的參數(shù)重寫（修改）父組件的參數(shù)

如果子組件不調用，props的參數(shù)就會是默認的值。

子組件可以通過在標簽內使用:特定值的方式來修改值

重置的按鈕實現(xiàn)，可以參考之前封裝遠程搜索輸入框的帖子