國,省,市,區 縣 四級聯動

一, 技術棧:vue + quasar + vuelidate + axios

二, 具體**(表單驗證規則vuelidate上篇文章已經寫過了,這裡就不多做介紹咯)

icon=

"location_on"
:error=
"readonly == false? $v.baseinfoform.country.$error: false"
error-label=
"國家不能為空"
class
="col-lg-4 col-md-6 col-sm-12 col-xs-12"
>
:readonly=
"readonly"
:float-label=
"$t('國家')"
filter
:options=
"countryoptions"
@blur=
"$v.baseinfoform.country.$touch"
v-model=
"baseinfoform.country"
>
<
/q-select>
<
/q-field>
icon=
"place"
:error=
"readonly == false? $v.baseinfoform.province.$error: false"
error-label=
"省份不能為空"
class
="col-lg-4 col-md-6 col-sm-12 col-xs-12"
>
:readonly=
"readonly"
:float-label=
"$t('省份')"
filter
:options=
"provinceoptions"
@blur=
"$v.baseinfoform.province.$touch"
v-model=
"baseinfoform.province"
>
<
/q-select>
<
/q-field>
icon=
"place"
:error=
"readonly == false? $v.baseinfoform.city.$error: false"
error-label=
"城市不能為空"
class
="col-lg-4 col-md-6 col-sm-12 col-xs-12"
>
:readonly=
"readonly"
:float-label=
"$t('城市')"
filter
:options=
"cityoptions"
@blur=
"$v.baseinfoform.city.$touch"
v-model=
"baseinfoform.city"
>
<
/q-select>
<
/q-field>
icon=
"place"
:error=
"readonly == false? $v.baseinfoform.district.$error: false"
error-label=
"區(縣)不能為空"
class
="col-lg-4 col-md-6 col-sm-12 col-xs-12"
>
:readonly=
"readonly"
:float-label=
"$t('區(縣)')"
filter
:options=
"districtoptions"
@blur=
"$v.baseinfoform.district.$touch"
v-model=
"baseinfoform.district"
>
<
/q-select>
<
/q-field>

// 獲取國家資料

getcountrydata:
function()
).then
(function
(data)
_obj.label = item.name
_obj.value = item.id
_arr.
push
(_obj)})
that.countryoptions = _arr
}).catch
(function
(err))}
// 獲取省份資料
getprovincedata:
function
(country)).
then
(function
(data)
_obj.label = item.name
_obj.value = item.id
_arr.
push
(_obj)})
that.provinceoptions = _arr
}).catch
(function
(err)
)

js 多級聯動（省 市 區）

方式一 資料從資料庫獲取，ajax實現區域性重新整理 方式二 資料從json檔案獲取，ajax實現區域性重新整理 以方式二為例，進行演示 省市區 聯動 前提 需要有省 市 區三個的資料封裝檔案 實現 1.自封裝函式 多級聯動 function multiplecascades 建立select標籤 ...

js 多級聯動（省 市 區）

方式一 資料從資料庫獲取，ajax實現區域性重新整理 方式二 資料從json檔案獲取，ajax實現區域性重新整理 以方式二為例，進行演示 省市區 聯動 前提 需要有省 市 區三個的資料封裝檔案 實現 1.自封裝函式 多級聯動 function multiplecascades 建立select標籤 ...

js 多級聯動（省 市 區）

方式一 資料從資料庫獲取，ajax實現區域性重新整理 方式二 資料從json檔案獲取，ajax實現區域性重新整理 以方式二為例，進行演示 省市區 聯動 前提 需要有省 市 區三個的資料封裝檔案 實現 1.自封裝函式 多級聯動 function multiplecascades 建立select標籤 ...