省市聯動效果簡單描述:在選擇省之後,我們可以選擇其省對應的市,當沒有選擇省的時候,市級下拉為無資料。並且在這裡將省市對應的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...