递归二级联动前后台使用方法

 

一、后台代码

 /// <summary>
        /// 递归
        /// </summary>
        /// <param name="menus"></param>
        /// <param name="parentId"></param>
        /// <returns></returns>
        public List<TsMenu> GetMenu(List<Menu> menus,int parentId)
        {
            //Lamdba
            //商品管理  
                return menus.Where(u => u.ParentId == parentId).Select(m => new TsMenu()
                {
                    MId = m.MId,
                    MName = m.MName,
                    Icon = m.Icon,
                    Path = m.Path,
                    ParentId = m.ParentId,
                    TsMenus = GetMenu(menus,m.MId)  //商品管理的ID
            }).ToList();

二、创建链接链接前台下载Element以及axios布局

三、写二级联动的方法

getOptionsA() {
      this.$axios
        .get('http://localhost:55629/api/GetClassifies?pid=0')
        .then((res) => {
          this.optionsA = res.data
        })
    },
    getOptionsB(value) {
        //给第一级ID 赋值
       this.resetForm.CIdA = value[0]
      this.$axios
        .get(`http://localhost:55629/api/GetClassifies?pid=${value[0]}`)
        .then((res) => {
          this.optionsB = res.data
        })
    },

四、在页面中绑定对应的字段   注释:在Element中，props可以用来接收，它的value属性绑定对应的主键ID，label属性绑定要显示的字段完成

<el-cascader-panel :options="optionsA"
                           :props="{ value: 'CId', label: 'CName' }"
                           ref="optA"
                           @change="getOptionsB"></el-cascader-panel>

 

      待续......