SpringBoot3 + Vue3 + Element-Plus + TS 实现动态二级菜单级联选择器-效果展示

1.1 点击效果

1.2 选择效果

1.3 返回值

返回值为二级分类的 id

{
	categoryId: "21"
}

1.4 模拟后端返回数据

const categories = 
[
	[
	  { "id": 9, "name": "吃的" },
	  { "id": 5, "name": "食品" },
	  { "id": 4, "name": "数码" },
	  { "id": 1, "name": "服饰" }
	],
	[
	  { "id": 18, "name": "相机", "categoryFatherId": 4 },
	  { "id": 17, "name": "电脑", "categoryFatherId": 4 },
	  { "id": 14, "name": "裤子", "categoryFatherId": 1 },
	  { "id": 19, "name": "零食", "categoryFatherId": 5 },
	  { "id": 16, "name": "手机", "categoryFatherId": 4 },
	  { "id": 20, "name": "牛奶", "categoryFatherId": 5 },
	  { "id": 21, "name": "辣条", "categoryFatherId": 5 },
	  { "id": 1, "name": "衣服", "categoryFatherId": 1 },
	  { "id": 15, "name": "裙子", "categoryFatherId": 1 },
	  { "id": 23, "name": "可乐", "categoryFatherId": 9 }
	]
  ];