第十三章第六节：页面渲染分类数据

1、vue页面

<template>
  <!-- elemnetUI tree组件 
  :data="menus"：绑定的数据
  :props="defaultProps"：要渲染的数据项
  :expand-on-click-node="false"：点击添加和删除时不触发展开事件
  show-checkbox：显示单选框
  node-key="id"：数据唯一性id
  -->
  <el-tree
    :data="menus"
    :props="defaultProps"
    :expand-on-click-node="false"
    show-checkbox
    node-key="id"
  >
    <span class="custom-tree-node" slot-scope="{ node, data }">
      <span>{{ node.label }}</span>
      <span>
        <!-- 当层级小于等于2时 才会出现添加按钮 -->
        <el-button v-if="node.level<=2" type="text" size="mini" @click="() => append(data)">添加</el-button>
        <!-- 当没有子节点时才会出现删除按钮 -->
        <el-button
          v-if="node.childNodes.length==0"
          type="text"
          size="mini"
          @click="() => remove(node, data)"
        >刪除</el-button>
      </span>
    </span>
  </el-tree>
</template>

<script>
// elemnetUI tree组件的script
export default {
  data() {
    return {
      //elemnetUI tree组件的数据改为null
      menus: [],
      defaultProps: {
        // children为显示的子节点，必须返回的menus数组的属性key
        children: "children",
        // 要显示出来的名称，必须是返回menus数组的属性key
        label: "name"
      }
    };
  },
  methods: {
    //获取tree数据列表
    getMenus() {
      this.$http({
        //请求的url
        url: this.$http.adornUrl("/product/category/list/tree"),
        //请求方式
        method: "get"
        //成功以后的对数据的处理，把数据打印测试 ({data}):解构表达式
      }).then(({ data }) => {
        console.log("成功获取数据：" + data.data);
        // 把获取到的数据赋值给menus
        this.menus = data.data;
      });
    },
    // 添加方法
    append(data) {
      console.log("append", data);
    },
    // 删除方法
    remove(node, data) {
      console.log("remvoe==", node, data);
    }
  },
  //在组件刚被加载完调用获取tree数据的函数
  created() {
    this.getMenus();
  }
};
</script>

<style>
</style>

2、访问效果