✅P48_三级分类-查询-树形展示三级分类数据

网关路由配置后，获取三级分类数据的接口变为：

http://localhost:88/api/product/category/list/tree

在src\views\modules\product\文件夹下创建category.vue页面，首行输入vue，快速生成基本结构。详见：

P36-44、前端基础-VUE -> 快速生成vue 模板

在category.vue中编写查询三级分类的方法getMenuList() {}，即调用/product/category/list/tree后端接口。

<!-- 三级分类页面 -->
<template>
  <div>
    <!-- element-ui中查找Tree树形控件 -->
    <el-tree :data="menu" :props="defaultProps"></el-tree>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {

  data() {
    //这里存放数据
    return {
      menu: [],
      defaultProps: {
        children: "children",
        lable: "name"
      }
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getMenuList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl('/product/category/list/tree'),
        method: 'get',
      }).then((data) => {
        console.log("获取到三级分类数据", data);
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getMenuList();
  },
}
</script>
<style  scoped></style>

在getMenuList() {}方法中打印获取到的三级分类数据，结果如下：

数据对象是存储在data.data中；

将data对象解构出来：

export default {

  data() {
    //这里存放数据
    return {
      menu: [],
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    getMenuList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl('/product/category/list/tree'),
        method: 'get',
      }).then(({ data }) => {  // 1.使用解构即{}，将data对象解构出来
        console.log("成功获取到三级分类数据", data);
        // 2.将data中的data赋值给menu
        this.menu = data.data;
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getMenuList();
  },
}

注意：props的label和children属性，配置这两个属性页面才会正常显示出来

最终效果如下：