✨✨个人主页: 📚📚系列专栏: 📖 📖 📖 📖 📖📖📖📖 📖📖📖📖

🍨效果图

🍹核心代码实现

Element Plus: Tree Element Plus: TreeSelect 含有下拉菜单的树形选择器，结合了 el-tree 和 el-selectt 两个组件的功能。 <el-tree-select v-model="formData.parentId" :check-strictly="true" :data="categoryTreeData" :render-after-expand="false" :default-expand-all="true" /> data 展示数据 render-after-expand 属性是默认开启的，所选择的标签名可能不会及时更新显示，您可以把该属性设置为 false 来显示正确的名称 当属性 check-strictly=true 时，任何节点都可以被选择，否则只有子节点可被选择 default-expand-all 是否默认展开所有节点 data的数据结构 const data = [ { value: 1, label: Level one 1, children: [ { value: 1-1, label: Level two 1-1, children: [ { value: 1-1-1, label: Level three 1-1-1, }, ], }, ], }, { value: 2, label: Level one 2, children: [ { value: 2-1, label: Level two 2-1, children: [ { value: 2-1-1, label: Level three 2-1-1, }, ], }, { value: 2-2, label: Level two 2-2, children: [ { value: 2-2-1, label: Level three 2-2-1, }, ], }, ], }, ] 这是一种父子关系的数据结构,所以在创建数据库时需要对应的关系结构如下 上面的value映射id,label映射name,children代表子类 后端接口 <dependency> <groupId>cn.hutool</groupId> <artifactId>hutool-all</artifactId> <version>5.8.5</version> </dependency> hutool工具: 中有个自定义字段名的方法 使用如下 @GetMapping("/tree") public List<Tree<Integer>> select(){ //这里用的MyBatis Plus List<CategoryDto> dtos = categoryService.select(new CategoryQueryDto()); //配置 TreeNodeConfig treeNodeConfig = new TreeNodeConfig(); // 自定义属性名 都要默认值的 treeNodeConfig.setWeightKey("seq"); treeNodeConfig.setIdKey("id"); // 最大递归深度 treeNodeConfig.setDeep(2); //转换器 List<Tree<Integer>> treeNodes = TreeUtil.build(dtos, 0, treeNodeConfig, (treeNode, tree) -> { tree.setId(treeNode.getId()); tree.setParentId(treeNode.getParentId()); tree.setWeight(treeNode.getSeq()); tree.setName(treeNode.getName()); // 扩展属性 ... tree.putExtra("value", treeNode.getId()); tree.putExtra("label", treeNode.getName()); }); return treeNodes; } 返回treeNodes格式如下 上面的id,seq,parentId,name,这些数据根据需求去考虑是否获取 关键的是扩展属性value,label这两必须要有,目的是与前端树data结构中的value,label照应 // 扩展属性 ... tree.putExtra("value", treeNode.getId()); tree.putExtra("label", treeNode.getName()); 前端调用接口给:data="categoryTreeData"赋值 const categoryTreeData = ref([{ value: 0, label: "全部一级类目" }]) const callCategoryTreeApi = () => { categoryApi.tree.call().then((res:any) => { // concat 合并数组 categoryTreeData.value = categoryTreeData.value.concat(res) }) } 补充: v-model="formData.parentId"双向绑定父类ID(parentId),主要作用就是赋值和获取值