三级联动--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 = [];
            },