selet2 vue2實現下拉級聯

2021-09-28 11:49:00 字數 1475 閱讀 9559

難點:select2元件change事件要能與父級(即vue)通訊,並更新 起運港/目的港 拉下選項。vue不允許子元件更新父組價傳入的物件,即只允許資料單向流入(要用$emit。測試可傳v-model的input的value,傳遞其他父級傳入的物件提示不允許重寫父級變數)。

方案:vue通過v-mode將選中的值傳入select元件的props物件中,select中監聽input change事件,將選中的值通過$emit傳回父元件,在父級別(即vue)監聽(watch)選中的值,如果有變更,就去更新對方的下拉選項訪問(例如:監聽起運港,如果選了1,就去更新目的港繫結的下拉選項)

實現:slect2元件定義:

vue.component('select2', )

.val(this.value)

.trigger('change')

// emit event on change.

.on('change', function () )

},watch: ,

options: function (options) )

},pods: function(pods)

},destroyed: function ()

})

html中使用select2元件:

}目的港

}vue實現:

//template: '#demo-template',

data: , , , , ,

, ,

, , ,

, ],

pols: ,

pods: ,

showpol: true,

showpod: true,

targetpol: -1,

targetpod: -1

},mounted: function ()

this.pols = array.from(polsset);

this.pods = array.from(podsset);

},watch:

})$("#poto").empty();//先清空所有資料,否則帶出的下拉值會有重複復

$('#poto').select2();

},//監聽目的港,更新起運港

targetpod: function (val)

})$("#pofrom").empty();//先清空所有資料,否則帶出的下拉值會有重複復

$('#pofrom').select2(); }},

methods: ,

clearsearch: function (obj, evt) );

$("#poto").empty();//先清空所有資料,否則帶出的下拉值會有重複復

$('#poto').select2(); }}

});

iphone介面如何實現下拉列表2

下拉列表 listview uitableview alloc initwithframe cgrectmake linewidth,oldframe.size.height linewidth,oldframe.size.width linewidth 2,oldframe.size.height...

VUE 實現下拉重新整理 底部載入更多

就是 onpulldownrefresh 方法,看注釋,其他都是為了測試做貢獻 class biggest class biggest class wenzi div div view template export default methods 1000 該方法就是下拉重新整理 該方法需要在pa...

Yii2 使用select2 元件實現下拉搜尋

剛開始使用yii,需要實現下拉多選搜尋,就找到了select2這個元件,先看看實現後的效果 如何安裝select2網上有很詳細的教程,這裡不做贅述。完成後只需要在視 件use kartik select2 select2就可以了。具體的檢視中的 如下 form field model,search ...