vue 四級聯動 位址聯動 vue級聯選擇

vue 四級聯動效果

實現前提

首先看下，我們的開發環境及資料封裝特點：

第一： 開發框架vue-cli3 elementui

第二： 資料封裝情況，詳見**部分 data中的 data;

滿足以上2點再繼續，如果資料封裝有所不同，可根據實際情況稍作修改。

實現過程

此處主要採用vue計算屬性以及watch監聽輸入框變化，展示不同的資料。只需載入時一次請求即可。

僅個人想法，如有更好的方法，歡迎指導交流;-)；

//html部分

"queryparams" ref=
"queryform"
:inline
="true" label-width=
"80px"
>
"單元號" prop=
"propname"
>
"queryparams.propname" placeholder=
"請選擇區域屬性" clearable size=
"small" style=
"width: 140px"
@keyup.enter.native=
"handlequery"
>
for=
"dict in propsoptions"
:label=
"dict.name"
:value=
"dict.name"
/>
<
/el-select>
<
/el-form-item>
"" label-width=
"4px" prop=
"areaname"
>
"queryparams.areaname" placeholder=
"小區名稱" clearable size=
"small" style=
"width: 110px"
@keyup.enter.native=
"handlequery"
>
for=
"dict in areaoptions"
:label=
"dict.area"
:value=
"dict.area"
/>
<
/el-select>
<
/el-form-item>
"" label-width=
"4px" prop=
"buildingname"
>
"queryparams.buildingname" placeholder=
"樓號" clearable size=
"small" style=
"width: 110px"
@keyup.enter.native=
"handlequery"
>
for=
"dict in buildingsoptions"
:label=
"dict.buildingnametest"
:value=
"dict.buildingname"
/>
<
/el-select>
<
/el-form-item>
"" label-width=
"4px" prop=
"unit"
>
"queryparams.unit" placeholder=
"單元號" clearable size=
"small" style=
"width: 110px"
@keyup.enter.native=
"handlequery"
>
for=
"dict in unitsoptions"
:label=
"dict.unitname"
:value=
"dict.unit"
/>
<
/el-select>
<
/el-form-item>
<
/el-form>
//js部分，
data()
,//房屋位址聯動資料
listall:
,//總資料
propsoptions:
,//一級下拉資料
areaoptions:
,//二級下拉資料
buildingsoptions:
,//**下拉資料
unitsoptions:
,//四級下拉資料
//房屋資料
data:],
"2":
,"3":[
],},
//1單元},
//1號樓},
//晴波園
}//公寓
}//return	},
//計算屬性
computed:
,searchareaname()
,searchbuilding()
},//資料監聽
watch:))
;      this.areaoptions = areaoptions;
if(this.areaoptions)},
searchareaname
(val)))
;      this.buildingsoptions = buildingsoptions;
if(this.buildingsoptions)},
searchbuilding
(val)))
;      this.unitsoptions = unitsoptions;
if(this.unitsoptions)}}
,created()
, methods： );},}

四級聯動選單

找到乙個，很好用，別忘了把其中的 和 替換成 和 懶了一下下，大家自己替換吧！form name frm select name school nchange mulselect 1 select select name department nkeypress sortme this nchang...

前端HTML JS實現四級聯動

一 js 建立乙個xmlhttp 物件 選這個option後 想要的option能級聯 function getoptionbyid val business screening ziji.action?var data parentid val.value 傳入後台的引數 selid val.id...

vue二級聯動select

div span 所在區域 span select name v model country option value item v for item,index in area option select select name v model cityname option value item...