mybatis-plus+vue+elementUI查询出带子项形式的树形数据

最新推荐文章于 2024-08-09 21:48:19 发布

YECHANG1450

最新推荐文章于 2024-08-09 21:48:19 发布

阅读量754

点赞数 2

文章标签： mybatis vue elementui javascript vue.js

本文链接：https://blog.csdn.net/qq_41306043/article/details/113944835

版权

本文介绍了如何使用mybatis-plus、vue和elementUI查询并展示带子项的树形数据，以计划事项为例，通过elementUI的父子结构格式，利用mybatis-plus的映射功能直接获取json数据，详细讲解了从vue组件的created钩子到mapper层的实现过程。

摘要由CSDN通过智能技术生成

mybatis-plus+vue+elementUI

查询出带子项形式的树形数据

以计划事项为例(planItem)
在这里插入图片描述
element官网给的父项含子项的格式

所以输出的json数据中要有子项的数据
而依靠mybatis-plus的强大功能就可以直接查询出带子项数据的json数据
所以说mybatis-plus真香呀

在这里插入图片描述
我自己起名叫childPlanItems
所以mapping中collection的property也要叫childPlanItems
后面的子项数据都是存在childPlanItems中了

用created钩子函数执行selectAll方法

created: function () {
   
    this.selectAll();
  },
  methods: {
   
	selectAll() {
   
      let url =
        LIST_URL + "/" + this.currentPage + "/" + this.pageSize;
      this.axios({
   
        method: "POST",
        url: url,
        data: this.$data.searchForm,//查询用的,与本文无瓜
      })
        .then((res) => {
   
            this.$data.tableData = res.data.data.records;
            this.$data.totalCount = res.data.data.total; //totalcount
            this.$data.currentPage = res.data.data.current; //页数
        })
        .catch((error) => {
   
          this.$message.error(error);
        });
    },
  }

在controller层中

	@PreAuthorize("hasAuthority('/planItem')")
    @ApiImplicitParams({
   @ApiImplicitParam(name = "Authorization", value = "Authorization token", required = true, dataType = "string"