使用 Vue ElementUi 實現省市聯動效果

2021-10-20 06:15:58 字數 1503 閱讀 1006

省市聯動效果簡單描述:在選擇省之後,我們可以選擇其省對應的市,當沒有選擇省的時候,市級下拉為無資料。並且在這裡將省市對應的id作為本質要儲存到資料庫當中的資料。

使用vue進行開發。首先我們需要使用到兩個select選擇器,下面都使用elementui元件進行展示。使用到的是乙個表單,所以進行繫結時使用ordersreach.屬性值進行 繫結

之後將所需要展示的地市進行定義到data當中,定義乙個方法用於獲取這個省的選擇之後的id,根據這個id對城市陣列進行過濾,之後再使用watch對省的這個值進行偵聽,改變之後就呼叫這個方法計算得出城市陣列進行渲染。簡易**如下:

<

!-- 省份選擇 --

>

"selectedprov"

>

for=

"item in listprov"

:label=

"item.name"

:value=

"item.id"

:key=

"item.id"

>

<

/el-option>

<

/el-select>

<

!-- 城市選擇 --

>

"selectedcity"

>

for=

"item in listcity"

:value=

"item.id"

:key=

"item.id"

:label=

"item.name"

>

<

/el-option>

<

/el-select>

<

/div>

<

/template>

export

default,,

,,,]

,}},

created:

function()

, watch:

, methods:,,

]},// 獲取當前選擇省份下的城市列表

getcitylist:

function()

)}}}

<

/script>當然了,如果這個選擇框使用的是乙個物件包裹的屬性值,如最上方的圖所示,這樣我們就需要對這個物件的屬性進行偵聽,如何實現呢?

在這裡我們使用乙個computed獲取到這個物件的屬性值給到prov,之後對prov進行偵聽即可實現。

//對省份的選擇切換進行偵聽

watch:

,//獲取屬性,用於偵聽

computed:

},

vue Element UI 分頁使用 1

最近在使用element ui這套框架配合vue來寫前端頁面。在用element ui來製作 的時候,遇到了一些小問題,記錄方便學習。其中兩個事件是關於切換當前頁和切換顯示的列表條數的。另外的屬性也可以知道它的意思。它們都是動態繫結的。其中幾個屬性的值被存到了data中,兩個事件的處理簡單的進行賦值...

vue elementUI專案搭建

安裝node 基於node之npm環境下操作vue,所以先部署node 安裝gitwget http 7 extras x86 64 packages epel release 7 11.noarch.rpm yum install y epel release 7 11.noarch.rpm yu...

重置表單(vue elementui)

第一種 在methods下的具體方法中直接乙個乙個地將表單繫結的值賦值為空 最笨的方法,只適用於僅幾個繫結值的情況下 第二種 elementui官網的方法 從這裡直接進入官網表單相關位置 model ruleform rules rules ref ruleform label width 100p...