ok

layouts/error.vue

@@ -10,14 +10,14 @@
 export default {
   props: ['error'],
 //   layout: 'blog' // you can set a custom layout for the error page
-    // watch:{
-    //    error(v){
-    //        debugger;
-    //        if(v.statusCode==404){
-    //            this.$router.push("/error/404");
-    //        }
-    //    }
+    watch:{
+       error(v){
+           debugger;
+           if(v.statusCode==404){
+               this.$router.push("/error/404");
+           }
+       }
         
-    // }
+    }
 }
 </script>
\ No newline at end of file

pages/test/resource.vue

 <template>
-<div>
-
+  <div>
     <ResourceSelect v-model="model" @on-change="change"></ResourceSelect>
-    
+
     <p>{{model}}</p>
     <p>{{text}}</p>
     <Button @click="set">赋值</Button>
 
     <ProductSelect v-model="product" @on-change="pchange"></ProductSelect>
-<p>{{product}}</p>
- <Button @click="setp">赋值</Button>
-</div>
+    <p>{{product}}</p>
+    <Button @click="setp">赋值</Button>
+    <p>
+      <TreeNode :data="result"></TreeNode>
+    </p>
+    <p>
+        <Tree :data="result"></Tree>
+    </p>
+  </div>
 </template>
 
 <script>
-    import ResourceSelect from "@/components/page/resourceSelect"
-    export default {
-        components:{ResourceSelect},
-        name: '',
-        data() {
-            return {
-                model:[],
-                text:"",
-                product:"",
+import ResourceSelect from "@/components/page/resourceSelect";
+import TreeNode from "./treeNode";
+export default {
+  components: { TreeNode },
+  name: "",
+  data() {
+    return {
+      model: [],
+      result: [
+        {
+          title: "五二九纵",
+          id: 41,
+          expand: false,
+          selected: false,
+          checked: false,
+          upId: 0,
+          rootId: 0,
+          children: [
+            {
+              title: "气源分配器壳体",
+              id: 82,
+              expand: false,
+              selected: false,
+              checked: false,
+              upId: 0,
+              rootId: 0,
+              children: [
+                {
+                  title: "truio",
+                  id: 83,
+                  expand: false,
+                  selected: false,
+                  checked: false,
+                  upId: 82,
+                  rootId: 0,
+                  children: [],
+                  isProduct: 1,
+                  productId: 83,
+                  classType: 0,
+                  drawingNo: "34567"
+                },
+                {
+                  title: "北京吉普",
+                  id: 84,
+                  expand: false,
+                  selected: false,
+                  checked: false,
+                  upId: 82,
+                  rootId: 0,
+                  children: [],
+                  isProduct: 1,
+                  productId: 84,
+                  classType: 0,
+                  drawingNo: "BJJP-0001"
+                }
+              ],
+              isProduct: 1,
+              productId: 82,
+              classType: 41,
+              drawingNo: "TY9-06-0803"
             }
+          ],
+          isProduct: 0,
+          productId: 0,
+          classType: 0
         },
-        methods:{
-            change(v,items){
-               this.text=items.map(u=>u.label).join('/');
-            },
-            set(){
-                this.model=[ "1", 5 ];
-            },
-             pchange(v,item){
-            //    this.text=items.map(u=>u.label).join('/');
-            if(item.isProduct==0){
-                this.$Message.error("层级不能选择")
-                this.product=""
+        {
+          title: "北京汽车",
+          id: 45,
+          expand: false,
+          selected: false,
+          checked: false,
+          upId: 0,
+          rootId: 0,
+          children: [
+            {
+              title: "北京吉普",
+              id: 85,
+              expand: false,
+              selected: false,
+              checked: false,
+              upId: 0,
+              rootId: 0,
+              children: [],
+              isProduct: 1,
+              productId: 85,
+              classType: 45,
+              drawingNo: "BJJP-0001"
             }
-            },
-             setp(){
-                this.prodcut=8;
-            },
+          ],
+          isProduct: 0,
+          productId: 0,
+          classType: 0
         }
+      ],
+      text: "",
+      product: ""
+    };
+  },
+  methods: {
+    change(v, items) {
+      this.text = items.map(u => u.label).join("/");
+    },
+    set() {
+      this.model = ["1", 5];
+    },
+    pchange(v, item) {
+      //    this.text=items.map(u=>u.label).join('/');
+      if (item.isProduct == 0) {
+        this.$Message.error("层级不能选择");
+        this.product = "";
+      }
+    },
+    setp() {
+      this.prodcut = 8;
     }
+  }
+};
 </script>
 
 <style lang="less" >
-    
 </style>
\ No newline at end of file

pages/test/treeNode.vue

+<template>
+  <ul class="treeNode">
+    <li v-for="(li,i) in list" :key="i">
+      <span>{{li.title}}</span>
+      <treeNode v-if="li.children&&li.children.length>0" :data="li.children"></treeNode>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: "treeNode",
+  props: {
+    data: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      list: []
+    };
+  },
+  created() {
+    this.list = this.data;
+  }
+};
+</script>
+
+<style lang="less" >
+.treeNode {
+  li {
+    line-height: 35px;
+    span:hover {
+      background-color: royalblue;
+    }
+  }
+  li > ul {
+    padding-left: 20px;
+  }
+}
+</style>
\ No newline at end of file