bugfix

src/views/components/index/goodsList.vue

@@ -12,6 +12,7 @@
       <div class="good-category">
         <category-tree
           :treeList="categoryList"
+          :defaultId="0"
           @more="handelShowMore"
         ></category-tree>
       </div>
@@ -43,8 +44,10 @@
         <category-tree
           v-for="(item, index) in treeArr"
           :key="index"
-          :treeList="item"
-          :level="item[0].level + 2"
+          :index="index"
+          :defaultId="item.pId"
+          :treeList="item.list"
+          @more="handelShowMore"
           width="185px"
         ></category-tree>
       </div>
@@ -156,12 +159,20 @@ export default {
         this.selectedList.push({ id: item });
       }
     },
-    handelShowMore(data) {
-      if (!this.treeArr.length) {
-        this.treeArr.push(this.categoryList);
+    handelShowMore(data, index) {
+      let len = this.treeArr.length;
+      if (!len) {
+        this.treeArr.push({ list: this.categoryList });
+        len++;
+      }
+      if (len - 1 < index) {
+        this.treeArr.push({ list: data.children });
+        this.treeArr[index - 1].pId = data.categoryId;
+      } else {
+        this.treeArr = this.treeArr.splice(0, index + 1);
+        this.treeArr[index - 1].pId = data.categoryId;
+        this.treeArr[index].list = data.children;
       }
-      this.treeArr.push(data.children);
-      console.log(this.treeArr);
       this.isShow = true;
     },
   },
@@ -220,7 +231,7 @@ export default {
 }
 .treeBox {
   display: flex;
-  .good-category{
+  .good-category {
     margin-right: 20px;
   }
 }

src/views/components/index/tree.vue

@@ -1,17 +1,33 @@
 <template>
-  <div class="good-category" :style="{ width: width }">
-    <el-tree
-      highlight-current
-      :expand-on-click-node="false"
-      :data="treeList"
-      :props="defaultProps"
-      @node-expand="nodeExpand"
-      :filter-node-method="filterNode"
-      :auto-expand-parent="false"
-      :indent="6"
-      ref="tree"
-    ></el-tree>
-  </div>
+  <keep-alive>
+    <div class="good-category" :style="{ width: width }">
+      <el-tree
+        highlight-current
+        :expand-on-click-node="false"
+        :data="
+          index == 0
+            ? [
+                {
+                  categoryId: 0,
+                  categoryName: '全部',
+                  level: 1,
+                },
+                ...treeList,
+              ]
+            : treeList
+        "
+        :props="defaultProps"
+        @node-click="nodeClick"
+        @node-expand="nodeExpand"
+        :filter-node-method="filterNode"
+        :auto-expand-parent="false"
+        :indent="6"
+        node-key="categoryId"
+        :current-node-key="defaultId"
+        ref="tree"
+      ></el-tree>
+    </div>
+  </keep-alive>
 </template>
 
 <script>
@@ -28,9 +44,13 @@ export default {
         return [];
       },
     },
-    level: {
+    defaultId: {
       type: Number,
-      default: 3,
+      default: undefined,
+    },
+    index: {
+      type: Number,
+      default: 0,
     },
   },
   data() {
@@ -44,11 +64,14 @@ export default {
   methods: {
     nodeExpand(data) {
       if (data.isHasChildren) {
-        this.$emit("more", data);
+        this.$emit("more", data, this.index + 1);
       }
     },
-    filterNode(value, data) {
-      return data.level <= value;
+    nodeClick(data) {
+      console.log(data, 789);
+    },
+    filterNode(value, data, node) {
+      return node.level <= value;
     },
     renderContent(h, { node, data, store }) {
       return (
@@ -59,9 +82,21 @@ export default {
     },
     allExpandNodes(node) {
       for (let i = 0; i < node.childNodes.length; i++) {
-        node.childNodes[i].expanded = this.expandAll;
-        if (node.childNodes[i].childNodes.length > 0) {
-          this.allExpandNodes(node.childNodes[i]);
+        const _n = node.childNodes[i];
+        // 展开选中节点
+        if (
+          this.defaultId &&
+          _n.level > 1 &&
+          _n.data.categoryId == this.defaultId
+        ) {
+          _n.parent.expanded = true;
+          if (_n.level > 2) {
+            _n.parent.parent.expanded = true;
+          }
+        }
+        _n.expanded = false;
+        if (_n.childNodes.length > 0) {
+          this.allExpandNodes(_n);
         }
       }
     },
@@ -70,7 +105,7 @@ export default {
     treeList: {
       handler(val) {
         this.$nextTick(() => {
-          this.$refs.tree.filter(this.level);
+          this.$refs.tree.filter(3);
           this.allExpandNodes(this.$refs.tree.root);
         });
       },