API+Vue+ElementUI级联

一、Model层

1. 与数据库关联的表

   [Table("CityInfo")]
       public class CityInfo
       {
           [Key]
           public int CId { get; set; }
           public string CName { get; set; }
           public int PId { get; set; }
       }

    

2. 显示表

   public class City
       {
           public int CId { get; set; }
           public string CName { get; set; }
           public int PId { get; set; }
           public List<City> Children { get; set; }
       }

    

二、DAL层

public List<City> GetCityInfos()
        {
            return GetCities(db.CityInfos.ToList(), 0);
        }

        public List<City> GetCities(List<CityInfo> list,int pid)
        {
            return list.Where(u => u.PId == pid).Select(t => new City {
                CId = t.CId,
                CName = t.CName,
                PId = t.PId,
                Children = GetCities(list, t.CId).Count == 0 ? null : GetCities(list, t.CId)
            }).ToList();
        }

三、控制器

[HttpGet]
        public IHttpActionResult GetCityInfos()
        {
            return Json(dal.GetCityInfos());
        }

四、Vue

<template>
  <div>
      <el-cascader
    v-model="CId"
    :options="options"
    :props="{'value':'CId','label':'CName','children':'Children'}"></el-cascader>
  </div>
</template>

<script>
export default {
    data(){
        return{
            CId:[],
            options:[]
        }
    },
    methods:{
        loadSheng(){
            this.$axios.get('http://localhost:50882/api/DingDanInfo/GetCityInfos').then(res=>{
                this.options=res.data;
            })
        }
    },
    created(){
        this.loadSheng();
    }
}
</script>

五、效果