欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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="請輸入內(nèi)容"
        :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內(nèi),被其他界面引用

注意:

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

以下為dataList數(shù)組

形式一:dataList[0].name

形式二:dataList[0][name]

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

js的數(shù)組手動設(shè)置值(給dataList設(shè)置一個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導入對應(yīng)的組件,通過components來調(diào)用,并通過類似標簽的形式來聲明

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

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

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

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

這里父組件的placeholder也可以做成讓子組件自己選擇的,但是我這里的形式比較通用,就沒有修改,有興趣的可以自行優(yōu)化

placeholder="請輸入內(nèi)容"

到此這篇關(guān)于Vue封裝遠程下拉框組件的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)Vue封裝遠程下拉框 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue動態(tài)組件與異步組件實例詳解

    Vue動態(tài)組件與異步組件實例詳解

    這篇文章主要介紹了Vue動態(tài)組件與異步組件,結(jié)合實例形式分析了動態(tài)組件與異步組件相關(guān)概念、功能及使用技巧,需要的朋友可以參考下
    2019-02-02
  • Vue的虛擬DOM和diff算法你了解嗎

    Vue的虛擬DOM和diff算法你了解嗎

    這篇文章主要為大家詳細介紹了Vue的虛擬DOM和diff算法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02
  • vue+element+Java實現(xiàn)批量刪除功能

    vue+element+Java實現(xiàn)批量刪除功能

    這篇文章主要介紹了vue+element+Java實現(xiàn)批量刪除功能,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-04-04
  • vue2.0實現(xiàn)倒計時的插件(時間戳 刷新 跳轉(zhuǎn) 都不影響)

    vue2.0實現(xiàn)倒計時的插件(時間戳 刷新 跳轉(zhuǎn) 都不影響)

    我發(fā)現(xiàn)好多倒計時的插件,刷新都會變成從頭再來,于是自己用vue2.0寫了一個,感覺還不錯,特此分享到腳本之家平臺供大家參考下
    2017-03-03
  • Vue中computed(計算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明

    Vue中computed(計算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明

    這篇文章主要介紹了Vue中computed(計算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • vue前臺顯示500和405錯誤的解決(springboot為后臺)

    vue前臺顯示500和405錯誤的解決(springboot為后臺)

    這篇文章主要介紹了vue前臺顯示500和405錯誤的解決(springboot為后臺),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • Vue SPA首屏加載緩慢問題解決方案

    Vue SPA首屏加載緩慢問題解決方案

    這篇文章主要介紹了Vue SPA首屏加載緩慢問題解決方案,首屏時間(First Contentful Paint),指的是瀏覽器從響應(yīng)用戶輸入網(wǎng)址地址,到首屏內(nèi)容渲染完成的時間,此時整個網(wǎng)頁不一定要全部渲染完成,但需要展示當前視窗需要的內(nèi)容
    2023-03-03
  • vue.js入門教程之綁定class和style樣式

    vue.js入門教程之綁定class和style樣式

    小編之前介紹了通過vue.js計算屬性,不知道大家都學會了嗎。那這篇文章中我們將一起學習vue.js實現(xiàn)綁定class和style樣式,有需要的朋友們可以參考借鑒。
    2016-09-09
  • 詳解vue.js2.0父組件點擊觸發(fā)子組件方法

    詳解vue.js2.0父組件點擊觸發(fā)子組件方法

    本篇文章主要介紹了詳解vue.js2.0父組件點擊觸發(fā)子組件方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • vue使用v-if v-show頁面閃爍,div閃現(xiàn)的解決方法

    vue使用v-if v-show頁面閃爍,div閃現(xiàn)的解決方法

    在頁面層次結(jié)構(gòu),數(shù)據(jù)較多的時候,用v-if或者v-show就會出現(xiàn)div閃現(xiàn),或者部分閃爍的結(jié)果。怎么處理這樣的問題呢,下面小編給大家?guī)砹藇ue使用v-if v-show頁面閃爍,div閃現(xiàn)的解決方法,一起看看吧
    2018-10-10

最新評論