目录

src/components/TreeView.vue

@@ -1,6 +1,17 @@
 <template>
   <div class="he_tree_content he_tree_view" style="font-size: 14px">
-    <Tree :draggable="draggable" :value="treeData" ref="tree">
+    <el-tree
+      :data="treeData"
+      :props="defaultProps"
+      @node-click="handleNodeClick"
+    >
+      <div class="custom-tree-node" slot-scope="{ node }">
+        <div>
+          <span style="margin-right: 10px">{{ node.label }}</span>
+        </div>
+      </div></el-tree
+    >
+    <!-- <Tree :draggable="draggable" :value="treeData" ref="tree">
       <div
         :style="{
           paddingLeft:
@@ -42,9 +53,6 @@
           @click="tree.toggleFold(node, path)"
           v-if="node.is_courseware === 'false'"
         >
-          <!-- <template>
-                        <i class="el-icon-folder-add"></i>
-                    </template>-->
           {{ node.name }}
         </span>
         <span
@@ -63,7 +71,7 @@
           {{ node.name }}
         </span>
       </div>
-    </Tree>
+    </Tree> -->
   </div>
 </template>
 <script>
@@ -73,7 +81,7 @@ import { Tree, Fold, Draggable } from "he-tree-vue";
 
 export default {
   components: {
-    Tree: Tree.mixPlugins([Fold, Draggable]),
+    Tree: Tree.mixPlugins([Fold, Draggable])
   },
   props: [
     "changeId",
@@ -81,7 +89,7 @@ export default {
     "bookId",
     "tryFree",
     "changeTreeData",
-    "currentTreeID",
+    "currentTreeID"
   ],
   data() {
     return {
@@ -93,7 +101,7 @@ export default {
         name: "",
         radio: "1",
         is_courseware: "false",
-        children: [],
+        children: []
       },
       curNode: null,
       curIndex: "",
@@ -108,6 +116,16 @@ export default {
       nodeLevel: "", // 高亮节点的level
       nodeName: "",
       pidList: [],
+      defaultProps: {
+        children: "children",
+        label: "label",
+        isLeaf: (data, node) => {
+          if (data.is_leaf === "true") {
+            // 实体门店 叶子结点 不展示icon
+            return true;
+          }
+        }
+      }
     };
   },
   watch: {
@@ -119,7 +137,7 @@ export default {
         await this.unfoldData(this.activeIndex, this.treeData);
         await this.unfoldFather(this.treeData);
       }
-    },
+    }
   },
   methods: {
     // 递归找到当前节点的所有父节点
@@ -160,9 +178,9 @@ export default {
       let _this = this;
       let MethodName = "book-book_manager-GetBookChapterStruct";
       let data = {
-        book_id: this.bookId,
+        book_id: this.bookId
       };
-      getContent(MethodName, data).then((res) => {
+      getContent(MethodName, data).then(res => {
         _this.handleData(res, 0);
         _this.treeData = res.nodes;
         _this.changeTreeData(this.treeData);
@@ -174,10 +192,11 @@ export default {
     // 递归
     handleData(data, nodeIndex) {
       if (data.nodes) {
-        data.nodes.forEach((item) => {
+        data.nodes.forEach(item => {
           item.label = item.name;
           item.pid = data.id;
           item.nodexIndex = nodeIndex;
+          item.isLeaf = item.is_leaf === "true";
           if (item.nodes) {
             item.children = item.nodes;
             item.lists = item.nodes;
@@ -187,20 +206,22 @@ export default {
       }
     },
     handleNodeClick(data) {
-      this.activeIndex = data.id;
-      this.nodeLevel = data.level_index;
-      this.nodeName = data.name;
-      this.changeId(data.id, data.name, data.is_free_trial);
+      if (data.isLeaf) {
+        this.activeIndex = data.id;
+        this.nodeLevel = data.level_index;
+        this.nodeName = data.name;
+        this.changeId(data.id, data.name, data.is_free_trial);
+      }
     },
     // 返给父级当前高亮节点的index以及level
     handleParentIndex() {
       return this.activeIndex + "###" + this.nodeLevel + "###" + this.nodeName;
-    },
+    }
   },
   created() {
     this.getList();
     //this.$refs.tree.foldAllAfterMounted = true;
-  },
+  }
 };
 </script>
 <style lang="scss" scoped>
@@ -252,6 +273,10 @@ export default {
 }
 </style>
 <style lang="scss">
+.el-tree-node__expand-icon.is-leaf {
+  opacity: 0;
+}
+
 .he_tree_view .he-tree .tree-node {
   border: 0;
   padding: 0;
@@ -290,4 +315,4 @@ export default {
     font-weight: normal !important;
   }
 }
-</style>
+</style>