三级联动--Vue
2021/8/29 23:09:45
本文主要是介绍三级联动--Vue,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、后台代码
//三级联动 public List<CityModel> GetCity(int id) { return db.CityModels.Where(p => p.PId == id).ToList(); }
二、页面的显示
省<select v-model="faData.ProvinceId" v-on:change="City"> <option v-for="(item,index) in province" :value="item.NId">{{item.Province}}</option> </select> 市<select v-model="faData.CityId" v-on:change="County"> <option v-for="(item,index) in city" :value="item.NId">{{item.Province}}</option> </select> 县 <select v-model="faData.CountyId"> <option v-for="(item,index) in county" :value="item.NId">{{item.Province}}</option> </select>
三、方法的运用
//省 Province() { axios.get('/Client/GetCity?id='+0).then(res => { this.province = res.data; this.province.unshift({ "NId": "0", "Province": "请选择" }) }) }, //市 City() { if (this.faData.ProvinceId > 0) { this.city = []; this.county = []; axios.get('/Client/GetCity?id=' + this.faData.ProvinceId).then(res => { this.city = res.data; this.city.unshift({ "NId": "0", "Province": "请选择" }) this.faData.CityId = this.city[0].NId; }) } this.city = []; }, //县 County() { if (this.faData.CityId > 0 ) { this.county = []; axios.get('/Client/GetCity?id=' + this.faData.CityId).then(res => { this.county = res.data; this.county.unshift({ "NId": "0", "Province": "请选择" }) this.faData.CountyId = this.county[0].NId; }) } this.county = []; },
这篇关于三级联动--Vue的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue
- 2024-03-07breadcrumbs react js
- 2024-03-06react login page example
- 2024-03-06react router uselocation
- 2024-03-04postgres jsonb_set