Vue二级联动操作

一，后台操作

迁移数据库 使用Code First的方式

在Dal 绑定我们的下拉框

public List<GTYpe> GTYpe(int id)
        {
            return db.GTYpe.Where(p => p.GPId == id).ToList();
        }

控制器 调用dal层

 [HttpGet]
        public ActionResult  GTYpe(int id)
        {
            return Json(bll.GTYpe(id), JsonRequestBehavior.AllowGet);
        }

然后创建好我们的视图

布局

  <td>
                分类:
                <select v-model="proData.GTId" v-on:change="getClassify">
                    <option v-for="(item,index) in brands" :value="item.GTId">{{item.GTName}}</option>
                </select>
                品牌:
                <select v-model="proData.GPId">
                    <option v-for="(item,index) in classifys" :value="item.GTId">{{item.GTName}}</option>
                </select>
            </td>

Vue方法

  getBrand() {
                axios.get('/Info/GTYpe?id=0').then(res => {
                    this.brands = res.data;
                    this.brands.unshift({ "GTId": "0", "GTName": "请选择" });
                });
            },
            //加载品牌
            getClassify() {
                //this.proData.GTId>0  代表 点击的不是请选择
                if (this.proData.GTId>0) {
                    axios.get('/Info/GTYpe?id=' + this.proData.GTId).then(res => {
                        this.classifys = res.data;
                        this.classifys.unshift({ "GTId": "0", "GTName": "请选择" });
                        this.proData.GPId = 0;  //将品牌  变成 请选择状态
                    });
                }
                this.classifys = [];
            },