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+element+Java實現(xiàn)批量刪除功能
這篇文章主要介紹了vue+element+Java實現(xiàn)批量刪除功能,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04vue2.0實現(xiàn)倒計時的插件(時間戳 刷新 跳轉(zhuǎn) 都不影響)
我發(fā)現(xiàn)好多倒計時的插件,刷新都會變成從頭再來,于是自己用vue2.0寫了一個,感覺還不錯,特此分享到腳本之家平臺供大家參考下2017-03-03Vue中computed(計算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明
這篇文章主要介紹了Vue中computed(計算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07vue前臺顯示500和405錯誤的解決(springboot為后臺)
這篇文章主要介紹了vue前臺顯示500和405錯誤的解決(springboot為后臺),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-07-07vue使用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