Vue 三级联动

转载

mb5fdb0f7347f48 2021-08-27 15:16:00

文章标签 Vue C# .NET Framework ios json 文章分类 Node.js 前端开发

一、后台代码

在model层中定义一个类

[Table("City")]
    public class CityModel
    {
        [Key,DatabaseGenerated(DatabaseGeneratedOption.None)]
        public int ProvinceId { get; set; }
        public string CName{ get; set; }
        public int CityId { get; set; }
    }

数据迁移后，在数据访问层

public List<CityModel> BindCity(int id)
        {
            return db.Citys.Where(m => m.CityId == id).ToList();
        }

业务逻辑层调用

public List<CityModel> BindCity(int id)
        {
            return dal.BindCity(id);
        }

控制器操作

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

二、前台代码

页面布局-在框架中的一个表

<tr>
            <td><span style="color:red">*</span>籍贯</td>
            <td colspan="3">
                <select v-model="AddData.ProvinceId" v-on:change="BindCityCity">
                    <option v-for="(item,index) in bindCityProvince" :value="item.ProvinceId">{{item.CName}}</option>
                </select>
                <select v-model="AddData.CityId" v-on:change="BindCityTown">
                    <option v-for="(item,index) in bindCityCity" :value="item.ProvinceId">{{item.CName}}</option>
                </select>
                <select v-model="AddData.TownId">
                    <option v-for="(item,index) in bindCityTown" :value="item.ProvinceId">{{item.CName}}</option>
                </select>
            </td>
        </tr>

随后进行实际操作

<script>
    let app = new Vue({
        el: "#app",
        data() {
            return {
                bindCityProvince: [],
                bindCityCity: [],
                bindCityTown:[]
            }
        },
        methods: {
            BindCityProvince() {
                axios.get('/Staff/BindCity?id=0').then(res => {
                    this.bindCityProvince = res.data;
                    this.bindCityProvince.unshift({ "ProvinceId": "0", "CName": "请选择" });
                })
            },
            BindCityCity() {
                this.bindCityCity = [];
                this.bindCityTown = [];
                axios.get('/Staff/BindCity?id=' + this.AddData.ProvinceId).then(res => {
                    this.bindCityCity = res.data;
                    this.bindCityCity.unshift({ "ProvinceId": "0", "CName": "请选择" });
                    this.AddData.CityId = this.bindCityCity[0].CityId;
                })
            },
            BindCityTown() {
                this.bindCityTown = [];
                axios.get('/Staff/BindCity?id=' + this.AddData.CityId).then(res => {
                    this.bindCityTown = res.data;
                    this.bindCityTown.unshift({ "ProvinceId": "0", "CName": "请选择" });
                    this.AddData.TownId = this.bindCityTown[0].TownId;
                })
            }
        },
        created: function ()  {this.BindCityProvince();
        }
    })
</script>