目錄
前言：
一.數(shù)據(jù)庫表結構：
?二.下拉菜單組件
2.1 效果展示
2.2下拉菜單的組件代碼：
前言：
本篇博客，通過官網的學習，實現(xiàn)下拉菜單動態(tài)數(shù)據(jù)的傳遞與點擊事件，如果只是按部就班的按照官網來，官網下拉菜單模板所提供的事件只能傳死數(shù)據(jù)，很多博主都是照虎畫貓，傳遞死數(shù)據(jù)，含金量不夠。但是這一篇，不一樣。如果感覺被騙，請在評論區(qū)直接開罵
一.數(shù)據(jù)庫表結構：
?
?通過自連接查詢市，區(qū)，懂得都懂，發(fā)個sql語句
查詢市：
select a2.* from sys_area a1 join sys_area a2 on a2.parentId = a1.code where a1.code = #{code}查詢區(qū)：
select a3.* from sys_area a1 join sys_area a2 on a2.parentId = a1.code join sys_area a3 on a3.parentId = a2.code where a2.code =#{code}
?二.下拉菜單組件
2.1 效果展示
?頁面不夠美觀，但是功能沒有問題，另外，湖南的朋友，包括各地的朋友可以看看查詢的效果對不對，是否有自己的家鄉(xiāng)
2.2下拉菜單的組件代碼：
<!-- 省份下拉框-->
<el-dropdown @click="selectCityByProvince" trigger="click" split-button="true" placement="top-start">
<span class="el-dropdown-link">省
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="province in provinces"
@click.native="selectCityByProvince(province.name,province.code)">{{ province.name }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- 城市下拉框-->
<el-dropdown @click="selectDistrictByCity" trigger="click" split-button="true" placement="top-start">
<span class="el-dropdown-link">市
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="city in cities" @click.native="selectDistrictByCity(city.name,city.code)">
{{ city.name }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- 區(qū)域下拉框-->
<el-dropdown @click="saveCommunityForUpdate" trigger="click" split-button="true" placement="top-start">
<span class="el-dropdown-link">市
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="dis in districts" @click.native="saveCommunityForUpdate(dis.name,dis.code)">
{{ dis.name }}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>看過官網的朋友，看懂結構應該不成問題，但還是把重點講解一下
1.
<el-dropdown @click="saveCommunityForUpdate" trigger="click" split-button="true" placement="top-start">官網綁定的是command只能傳遞死數(shù)據(jù)，替換成click，trigger是用來實現(xiàn)下拉菜單的展示是通過點擊展開，還是通過hover展開
2.
<el-dropdown-item v-for="dis in districts" @click.native="saveCommunityForUpdate(dis.name,dis.code)"> {{ dis.name }} </el-dropdown-item>遍歷，同時綁定點擊事件，點擊選項框，即可觸發(fā)點擊事件。官網的頁面如下
觸發(fā)事件后傳遞的數(shù)據(jù)是死的。另外，經過我的研究，command內不能傳遞動態(tài)數(shù)據(jù)，如果可以的話在評論區(qū)教教我?
2.3查詢方法：
selectCityByProvince(name, code) {
console.log(name)
console.log(code)
this.provinceName = name
//發(fā)送請求查詢省下面的市
this.axios.get("http://localhost:8080/selectCity?code=" + code)
.then(result => {
if (result.data.status == "OK") {
console.log("查詢省下面的市" + result);
//將查詢結果存入cities
this.cities = result.data.data
//將省的編號給對象
this.community.communityProvenceCode = code
}
})
},
//通過市查詢區(qū)的方法
selectDistrictByCity(name, code) {
this.axios.get("http://localhost:8080/selectDistrict?code=" + code)
.then(result => {
if (result.data.status == "OK") {
console.log("查詢到的區(qū)" + result)
this.districts = result.data.data;
//將修改的市的編號給對象
this.community.communityCityCode = code
}
})
},
saveCommunityForUpdate(name, code) {
console.log("查詢到的區(qū)" + name)
this.community.communityTownCode = code
console.log(this.community.communityTownCode)
},?思路：
1.進入該頁面的時候，查詢所有省份的數(shù)據(jù)，傳給省份的下拉菜單。
2.點擊選中的省份觸發(fā)點擊事件，發(fā)送請求給后端，返回該省份所擁有的城市的信息，通過自連接實現(xiàn)。
3.點擊選中的市，查詢出該市擁有的區(qū)。文章來源：http://www.zghlxwxcb.cn/news/detail-650111.html
4.將選中的省市區(qū)的編號傳給綁定的對象，發(fā)送給后臺，實現(xiàn)省市區(qū)查詢文章來源地址http://www.zghlxwxcb.cn/news/detail-650111.html
到了這里，關于element ui 下拉菜單組件 結合springboot 實現(xiàn)省市區(qū)簡易三級聯(lián)動 動態(tài)查詢 并修改地點的省市區(qū)的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
