Vue element-ui springboot实现前后端分离树形结构

1.1 Vue-template

<template>
  <div class="first-app">
    <el-tree :data="tree" :props="defaultProps" ></el-tree>
  </div>
</template>

1.2 Vue-script

<script>
export default {
  name: "First",
  data() {
    return {
      tree: [],
      defaultProps: {
        children: "newFileList",
        label: "name",
      },
    };
  },
   created() {
      this.getTree()
  },

  methods: {
    getTree() {
      this.$axios.get("http://localhost:9005/getTree")
        .then(res => {
          this.tree = res.data
        })
    }
  }  
};
</script>

2.1实体类

@Data
@TableName("new_file")
@Accessors(chain = true)
public class NewFile {
    @TableId(value ="id",type = IdType.ASSIGN_ID)
    private String id;
    private String pid;
    private String name;
    private String type;
}

2.2dto

@Data
public class NewFileDto extends NewFile {
    List<NewFile> newFileList;
}

2.3实现类

    @CrossOrigin(origins ="*",maxAge = 3600)
    @GetMapping("/getTree")
    @ResponseBody
    public List getTree(){
        List allTreeList =new ArrayList();
        List treeOne=newFileService.lambdaQuery().eq(NewFile::getPid,"0").list();
        for (int i=0;i<treeOne.size();i++){
            NewFileDto newFileOne=new NewFileDto();
            BeanUtils.copyProperties(treeOne.get(i),newFileOne);
            List treeTwo=newFileService.lambdaQuery().eq(NewFile::getPid,newFileOne.getId()).list();
            newFileOne.setNewFileList(treeTwo);
            allTreeList.add(newFileOne);
        }
        return allTreeList;
    }

2.4数据库

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for new_file
-- ----------------------------
DROP TABLE IF EXISTS `new_file`;
CREATE TABLE `new_file`  (
  `id` varchar(600) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL,
  `pid` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL,
  `name` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL,
  `type` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL,
  `sort` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = Dynamic;
-- ----------------------------
-- Records of new_file
-- ----------------------------
INSERT INTO `new_file` VALUES ('1', '0', '手机', '1', NULL);
INSERT INTO `new_file` VALUES ('2', '1', '国产', '2', NULL);
INSERT INTO `new_file` VALUES ('3', '1', '进口', '2', NULL);
INSERT INTO `new_file` VALUES ('4', '0', '书籍', '1', NULL);
INSERT INTO `new_file` VALUES ('5', '4', '外语', '2', NULL);
INSERT INTO `new_file` VALUES ('6', '4', '汉语', '2', NULL);
SET FOREIGN_KEY_CHECKS = 1;