Vue三级联动

本文主要是介绍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();
        }
    })

这篇关于Vue三级联动的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！