谷粒商城42 - 前端-商品服务-API-三级分类-删除-页面效果

怼烎@ 2022-11-25 10:11 126阅读 0赞

### 文章目录 ###

*   *   *  菜单的删除需求分析
         *  前端页面
         *  对显示的树进行优化
         *   *  只有树形的层级是一级或者二级才展示append
             *  只有没有子节点的才显示delele
             *  显示勾选框
             *  给每一行加上key

### 菜单的删除需求分析 ###

需求: 没有子菜单, 并且没有被其他地方引用的菜单, 可以删除.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
使用树的两种方式, 可以实现树的删除 .  
https://element.eleme.cn/\#/zh-CN/component/tree  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
使用 scoped slot 更加的友好

### 前端页面 ###

使用elementui的scoped slot ,复制其示例代码到catagory.vue中  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]

并且对methods也进行复制, 在控制台中, 打印看其会传递什么参数  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3][]

完整代码

<template>
      <el-tree :data="menus" :props="defaultProps" @node-click="handleNodeClick">
        
        <span class="custom-tree-node" slot-scope="{ node, data }">
          
          <span>{ {  node.label }}</span>
          <span>
            
            <el-button type="text" size="mini" @click="() => append(data)">Append</el-button>
            <el-button type="text" size="mini" @click="() => remove(node, data)">Delete</el-button>
          </span>
        </span>
      </el-tree>
    </template>
    
    <script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    
    export default { 
      //import引入的组件需要注入到对象中才能使用
      components: { },
    
      data() { 
        return { 
          menus: [],
          defaultProps: { 
            children: "children",
            label: "name",
          },
        };
      },
      methods: { 
        handleNodeClick(data) { 
          console.log(data);
        },
        getMenus() { 
          this.$http({ 
            url: this.$http.adornUrl("/product/category/list/tree"),
            method: "get",
          }).then(({  data }) => { 
            console.log("成功获取到菜单数据 .... ", data.data);
            this.menus = data.data;
          });
        },
        append(data) { 
          console.log("append " , data);
        },
        remove(node, data) { 
          console.log("remove" , node, data);
        }
      }
    };
    </script>
    <style scoped>
    </style>

点击某一个delete按钮, 可以看到打印的 node 和data 的数据, 可以看到 node为当前节点相关的信息. 而data为从后端数据库中获取的当前点击的节点信息.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 4][]  
加上 `:expand-on-click-node="false"` , 使其点击文字的时候,不拖放树形结构. 点击三角形的时候, 才显示或者缩放 .  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 5][]  
同时去除其点击函数  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 6][]

### 对显示的树进行优化 ###

使用vue的v-if 进行条件判断, 对指定条件的,才进行显示.

#### 只有树形的层级是一级或者二级才展示append ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 7][]

#### 只有没有子节点的才显示delele ####

![20200807202322385.png][]

#### 显示勾选框 ####

![20200807202619634.png][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 8][]

#### 给每一行加上key ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 9][]  
使用后端传递的唯一id

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 10][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 11][]  
显示效果如下  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 12][]

完整的代码如下

<template>
      <el-tree
        :data="menus"
        :props="defaultProps"
        :expand-on-click-node="false"
        show-checkbox
        node-key="catId"
      >
        
    
        <span class="custom-tree-node" slot-scope="{ node, data }">
          
          <span>{ {  node.label }}</span>
          <span>
            
            <el-button v-if="node.level <=2" type="text" size="mini" @click="() => append(data)">Append</el-button>
            <el-button
              v-if="node.childNodes.length ==0"
              type="text"
              size="mini"
              @click="() => remove(node, data)"
            >Delete</el-button>
          </span>
        </span>
      </el-tree>
    </template>
    
    <script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    
    export default { 
      //import引入的组件需要注入到对象中才能使用
      components: { },
    
      data() { 
        return { 
          menus: [],
          defaultProps: { 
            children: "children",
            label: "name",
          },
        };
      },
      methods: { 
        getMenus() { 
          this.$http({ 
            url: this.$http.adornUrl("/product/category/list/tree"),
            method: "get",
          }).then(({  data }) => { 
            console.log("成功获取到菜单数据 .... ", data.data);
            this.menus = data.data;
          });
        },
        append(data) { 
          console.log("append ", data);
        },
        remove(node, data) { 
          console.log("remove", node, data);
        },
      },
      //监听属性 类似于data概念
      computed: { },
      //监控data中的数据变化
      watch: { },
      //方法集合
      //生命周期 - 创建完成（可以访问当前this实例） 组件创建完成就发送请求
      created() { 
        this.getMenus();
      },
      //生命周期 - 挂载完成（可以访问DOM元素）
      mounted() { },
      beforeCreate() { }, //生命周期 - 创建之前
      beforeMount() { }, //生命周期 - 挂载之前
      beforeUpdate() { }, //生命周期 - 更新之前
      updated() { }, //生命周期 - 更新之后
      beforeDestroy() { }, //生命周期 - 销毁之前
      destroyed() { }, //生命周期 - 销毁完成
      activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发. 页面被激活就会发送请求
    };
    </script>
    <style scoped>
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20221124/b1d75392b68f410aaff409d5a7c40d60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20221124/56cc64cca47941ba89018dae2ab83230.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20221124/278adfe71bc74de3ad51ff4c01d1bc00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3]: /images/20221124/ca3337ff5ce34827a8ac80322b75d5df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 4]: /images/20221124/12c1bd6b4fc747a2a65a7f53fdff5358.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 5]: /images/20221124/b9c97091740742eead6435c04c7f6124.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 6]: /images/20221124/d31dc3496cee4ea8bee550a3cddf5f9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 7]: /images/20221124/80cb14e857f54973ae98563d581b60f0.png
[20200807202322385.png]: /images/20221124/621856f8eb88488297be61f2c1419263.png
[20200807202619634.png]: /images/20221124/53ce0e510bf04f27b667d6d01ed04cc6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 8]: /images/20221124/df0b454259f24df5af6f8e9bfacfb712.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 9]: /images/20221124/07421d2d6c734ee18c079ca525e8bd8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 10]: /images/20221124/70549eca42ad47b6b58b1ae59c039b63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 11]: /images/20221124/8119391dffce41109d72b03ac0d8a61c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 12]: /images/20221124/bad620afa13743209f666114d5350ac7.png