删除 vue-jstree, 使用 el-tree 替换

package-lock.json

@@ -15048,11 +15048,6 @@
       "integrity": "sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=",
       "dev": true
     },
-    "vue-jstree": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmmirror.com/vue-jstree/-/vue-jstree-2.1.6.tgz",
-      "integrity": "sha512-vtUmhLbfE2JvcnYNRXauJPkNJSRO/f9BTsbxV+ESXP/mMQPVUIYI4EkSHKSEOxVDHTU7SfLp/AxplmaAl6ctcg=="
-    },
     "vue-loader": {
       "version": "15.9.0",
       "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.9.0.tgz",

package.json

@@ -34,7 +34,6 @@
     "vue-baidu-map": "^0.21.22",
     "vue-clipboard2": "^0.3.3",
     "vue-cookies": "^1.7.0",
-    "vue-jstree": "^2.1.6",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.4.5",
     "vue-simple-uploader": "^0.7.6",

src/views/home/ShortVideo.vue

@@ -8,7 +8,18 @@
             <span>视频分区</span>
           </div>
           <div class="item">
-            <v-jstree :data="treeNode" @item-click="itemClick" />
+            <el-tree
+              :data="treeNode"
+              :props="defaultProps"
+              accordion
+              @node-click="handleNodeClick"
+            >
+              <span slot-scope="{ node, data }">
+                <span v-if="data.children" :class="data.icon">&#xe7d1;</span>
+                <span v-else :class="data.icon">&#xe7bb;</span>
+                <span>{{ node.label }}</span>
+              </span>
+            </el-tree>
           </div>
         </el-card>
       </el-col>
@@ -44,13 +55,11 @@
 
 <script>
 import VideoCard from 'components/card/VideoCard'
-import VJstree from 'vue-jstree'
-
 import { videoCategory, categoryShortVideos } from '@/api/video'
 
 export default {
   name: 'ShortVideo',
-  components: { VideoCard, VJstree },
+  components: { VideoCard },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
@@ -60,7 +69,12 @@ export default {
       totalSize: 0,
       dataList: [],
       categoryId: 1,
-      treeNode: []
+      treeNode: [],
+      defaultProps: {
+        children: 'children',
+        label: 'label',
+        value: 'value'
+      }
     }
   },
   created() {
@@ -97,6 +111,13 @@ export default {
     }
   },
   methods: {
+    handleNodeClick(data) {
+      this.currentPage = 1
+      this.dataList = []
+
+      this.categoryId = data.value
+      this.videoPageWrapper(this.categoryId, this.currentPage)
+    },
     handleCurrentChange(currentPage) {
       this.currentPage = currentPage
       this.videoPageWrapper(this.categoryId, this.currentPage)
@@ -125,15 +146,6 @@ export default {
           duration: 3000
         })
       })
-    },
-    itemClick(node) {
-      const model = node.model
-      this.categoryId = model.value
-      /* if (model.children.length === 0) {
-        this.categoryId = model.value
-      }*/
-
-      this.videoPageWrapper(this.categoryId, this.currentPage)
     }
   }
 }
@@ -172,10 +184,4 @@ export default {
   text-align: center;
   padding: 10px;
 }
-
-.category-btn {
-  padding-left: 14%;
-  padding-right: 6%;
-  padding-top: 20px;
-}
 </style>

src/views/home/Video.vue

@@ -8,7 +8,18 @@
             <span>视频分区</span>
           </div>
           <div class="item">
-            <v-jstree :data="treeNode" @item-click="itemClick" />
+            <el-tree
+              :data="treeNode"
+              :props="defaultProps"
+              accordion
+              @node-click="handleNodeClick"
+            >
+              <span slot-scope="{ node, data }">
+                <span v-if="data.children" :class="data.icon">&#xe7d1;</span>
+                <span v-else :class="data.icon">&#xe7bb;</span>
+                <span>{{ node.label }}</span>
+              </span>
+            </el-tree>
           </div>
         </el-card>
       </el-col>
@@ -44,13 +55,11 @@
 
 <script>
 import VideoCard from 'components/card/VideoCard'
-import VJstree from 'vue-jstree'
-
 import { videoCategory, categoryVideos } from '@/api/video'
 
 export default {
   name: 'Video',
-  components: { VideoCard, VJstree },
+  components: { VideoCard },
   data() {
     return {
       // 屏幕宽度, 为了控制分页条的大小
@@ -60,7 +69,24 @@ export default {
       totalSize: 0,
       dataList: [],
       categoryId: 1,
-      treeNode: []
+      treeNode: [
+        {
+          label: '一级 1',
+          value: 1,
+          children: [
+            {
+              label: '二级 1-1',
+              value: 2,
+              children: []
+            }
+          ]
+        }
+      ],
+      defaultProps: {
+        children: 'children',
+        label: 'label',
+        value: 'value'
+      }
     }
   },
   created() {
@@ -97,6 +123,13 @@ export default {
     }
   },
   methods: {
+    handleNodeClick(data) {
+      this.currentPage = 1
+      this.dataList = []
+
+      this.categoryId = data.value
+      this.videoPageWrapper(this.categoryId, this.currentPage)
+    },
     handleCurrentChange(currentPage) {
       this.currentPage = currentPage
       this.videoPageWrapper(this.categoryId, this.currentPage)
@@ -125,14 +158,6 @@ export default {
           duration: 3000
         })
       })
-    },
-    itemClick(node) {
-      this.currentPage = 1
-      this.dataList = []
-
-      const model = node.model
-      this.categoryId = model.value
-      this.videoPageWrapper(this.categoryId, this.currentPage)
     }
   }
 }
@@ -171,10 +196,4 @@ export default {
   text-align: center;
   padding: 10px;
 }
-
-.category-btn {
-  padding-left: 14%;
-  padding-right: 6%;
-  padding-top: 20px;
-}
 </style>