Vue三级联动

数据层:

public List<City> GetCity(int Pid)
{
   return db.City.Where(w => w.ParentId == Pid).ToList(); }

控制器:

public ActionResult GetCity(int Pid)
{
            return Json(dal.GetCity(Pid), JsonRequestBehavior.AllowGet);
}

Vue语法:

let app = new Vue({
        el: "#app",
        data() {
            return {
                FormData: {

                    ProvinceId: "0",
                    CityId: "0",
                    CountyId: "0",

                },
                selectItem: [],
                provinceItem: [],
                cityItem: [],
                countyItem: []
            };               
        },
        methods: {
            getProvince() {
                axios.get('/Employee/GetCity?pid=0').then(res => {
                    this.provinceItem = res.data;
                    this.provinceItem.unshift({ "CId": "0", "CName": "请选择" })
                })
            },
            getCity() {
                this.cityItem = [];
                this.countyItem = [];
                axios.get('/Employee/GetCity?pid=' + this.FormData.ProvinceId).then(res => {
                    this.cityItem = res.data;
                    this.cityItem.unshift({ "CId": "0", "CName": "请选择" });
                    this.formData.CityId = this.cityItem[0].CId;
                })
            },
            getCounty() {
                this.countyItem = [];
                axios.get('/Employee/GetCity?pid=' + this.FormData.CityId).then(res => {
                    this.countyItem = res.data;
                    this.countyItem.unshift({ "CId": "0", "CName": "请选择" });
                    this.formData.CountyId = this.countyItem[0].CId;
                })
            },   
        },
        created: function () {
            this.getDept();
            this.getProvince();
        }
    })

 

上一篇:Mysql5.7 存储过程 遍历select结果集并进行其他操作


下一篇:SQL 练习37