封装左侧tab组件

src/components/tabLeft.vue

@@ -0,0 +1,59 @@
+
+<template>
+    <div class="left">
+      <ul>
+        <li v-for="(item, index) in tabList" :key="index" @click="skip(index)">
+          <i class="el-icon-edit"></i>
+          {{ item }}
+        </li>
+      </ul>
+    </div>
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data () {
+    return {
+      tabList: [
+        '藏品登记',
+        '入库管理',
+        '出库管理',
+        '藏品总账',
+        '藏品盘核',
+        '藏品注销'
+      ]
+    }
+  },
+  methods: {
+    skip (index) {
+      this.$router.push(`/layout/holding${index}`).catch(() => {})
+    }
+  }
+}
+</script>
+<style lang='less' scoped>
+  .left {
+    width: 220px;
+    min-width: 130px;
+    height: 868px;
+    background-color: #fff;
+    box-shadow: 1px 1px 10px 1px;
+    ul {
+      li:nth-of-type(1) {
+        background-color: #e6f7ff;
+      }
+      li {
+        cursor: pointer;
+        color: black;
+        font-size: 16px;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        i {
+          margin: 0 18px;
+        }
+      }
+    }
+  }</style>

src/views/holding/holding0.vue

@@ -1,14 +1,16 @@
 <!--  -->
 <template>
   <div class="holding">
-    <div class="left">
+
+    <!-- <div class="left">
       <ul>
         <li v-for="(item, index) in tabList" :key="index" @click="skip(index)">
           <i class="el-icon-edit"></i>
           {{ item }}
         </li>
       </ul>
-    </div>
+    </div> -->
+<TabList />
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">
@@ -96,18 +98,14 @@
 </template>
 
 <script>
+import TabList from '@/components/tabLeft.vue'
 export default {
   name: 'Holding0',
+  components: {
+    TabList
+  },
   data () {
     return {
-      tabList: [
-        '藏品登记',
-        '入库管理',
-        '出库管理',
-        '藏品总账',
-        '藏品盘核',
-        '藏品注销'
-      ],
       sourceVal: '',
       type: '',
       time: '',
@@ -142,9 +140,7 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    skip (index) {
-      this.$router.push(`/layout/holding${index}`).catch(() => {})
-    }
+
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {},
@@ -168,29 +164,6 @@ export default {
   }
 
   display: flex;
-  .left {
-    width: 220px;
-    min-width: 130px;
-    height: 868px;
-    background-color: #fff;
-    box-shadow: 1px 1px 10px 1px;
-    ul {
-      li:nth-of-type(1) {
-        background-color: #e6f7ff;
-      }
-      li {
-        cursor: pointer;
-        color: black;
-        font-size: 16px;
-        height: 60px;
-        display: flex;
-        align-items: center;
-        i {
-          margin: 0 18px;
-        }
-      }
-    }
-  }
   .right {
     width: 100%;
     height: 868px;

src/views/holding/holding0_add.vue

@@ -1,6 +1,7 @@
 <!--  -->
 <template>
   <div class="holdingAdd">
+
     <div class="left">
       <ul>
         <li v-for="(item, index) in tabList" :key="index" @click="skip(index)">
@@ -9,6 +10,7 @@
         </li>
       </ul>
     </div>
+
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">