完成封装左边tab栏之后的改造

src/components/tabLeft.vue

@@ -2,7 +2,7 @@
 <template>
     <div class="left">
       <ul>
-        <li v-for="(item, index) in tabList" :key="index" @click="skip(index)">
+        <li :class="{active:ind===index}" v-for="(item, index) in tabList" :key="index" @click="skip(index)">
           <i class="el-icon-edit"></i>
           {{ item }}
         </li>
@@ -14,6 +14,12 @@
 <script>
 export default {
   components: {},
+  props: {
+    ind: {
+      type: Number,
+      default: 0
+    }
+  },
   data () {
     return {
       tabList: [
@@ -41,9 +47,6 @@ export default {
     background-color: #fff;
     box-shadow: 1px 1px 10px 1px;
     ul {
-      li:nth-of-type(1) {
-        background-color: #e6f7ff;
-      }
       li {
         cursor: pointer;
         color: black;
@@ -55,5 +58,11 @@ export default {
           margin: 0 18px;
         }
       }
+      li:hover{
+        background:#e6f7ff ;
+      }
+      .active {
+        background:#e6f7ff ;
+      }
     }
   }</style>

src/views/holding/holding0.vue

@@ -2,14 +2,6 @@
 <template>
   <div class="holding">
 
-    <!-- <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> -->
 <TabList />
     <div class="right">
       <div class="top">

src/views/holding/holding0_add.vue

@@ -2,15 +2,7 @@
 <template>
   <div class="holdingAdd">
 
-    <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>
-
+<TabList />
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">
@@ -116,22 +108,16 @@
 </template>
 
 <script>
+import TabList from '@/components/tabLeft.vue'
 import Holding0Dialog from './holding0_Dialog.vue'
 export default {
   name: 'HoldingAdd',
   components: {
-    Holding0Dialog
+    Holding0Dialog,
+    TabList
   },
   data () {
     return {
-      tabList: [
-        '藏品登记',
-        '入库管理',
-        '出库管理',
-        '藏品总账',
-        '藏品盘核',
-        '藏品注销'
-      ],
       // 控制弹出层显示隐藏
       isShow: false,
       // 表单数据
@@ -198,29 +184,6 @@ export default {
     font-weight: 800;
   }
   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%;
     display: flex;

src/views/holding/holding0_audit.vue

@@ -1,14 +1,7 @@
 <!--  -->
 <template>
   <div class="holding0_audit">
-    <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>
+    <TabList />
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">
@@ -118,24 +111,18 @@
 </template>
 
 <script>
+import TabList from '@/components/tabLeft.vue'
+
 import Holding0AuditDia from './holding0_audit_Dia.vue'
 export default {
   name: 'holding0_audit',
   // import引入的组件需要注入到对象中才能使用
-  components: { Holding0AuditDia },
+  components: { Holding0AuditDia, TabList },
   data () {
     // 这里存放数据
     return {
       // 点击查看显示弹窗
       isShow: false,
-      tabList: [
-        '藏品登记',
-        '入库管理',
-        '出库管理',
-        '藏品总账',
-        '藏品盘核',
-        '藏品注销'
-      ],
       fromData: {
         textarea: ''
       },
@@ -189,29 +176,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%;
     display: flex;

src/views/holding/holding0_result.vue

@@ -1,14 +1,7 @@
 <!--  -->
 <template>
   <div class="holding0_result">
-    <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>
+    <TabList />
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">
@@ -103,23 +96,16 @@
 </template>
 
 <script>
+import TabList from '@/components/tabLeft.vue'
 export default {
   name: 'holding0_result',
   // import引入的组件需要注入到对象中才能使用
-  components: { },
+  components: { TabList },
   data () {
     // 这里存放数据
     return {
       // 点击查看显示弹窗
       isShow: false,
-      tabList: [
-        '藏品登记',
-        '入库管理',
-        '出库管理',
-        '藏品总账',
-        '藏品盘核',
-        '藏品注销'
-      ],
       fromData: {
         textarea: ''
       },
@@ -174,29 +160,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%;
     display: flex;

src/views/holding/holding1.vue

@@ -1,14 +1,7 @@
 <!--  -->
 <template>
   <div class="holding">
-    <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>
+    <TabList :ind='1'/>
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">
@@ -84,18 +77,12 @@
 </template>
 
 <script>
+import TabList from '@/components/tabLeft.vue'
 export default {
   name: 'Holding0',
+  components: { TabList },
   data () {
     return {
-      tabList: [
-        '藏品登记',
-        '入库管理',
-        '出库管理',
-        '藏品总账',
-        '藏品盘核',
-        '藏品注销'
-      ],
       type: '',
       time: '',
       // 表格数据
@@ -119,9 +106,7 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    skip (index) {
-      this.$router.push(`/layout/holding${index}`).catch(() => {})
-    }
+
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {},
@@ -145,29 +130,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(2) {
-        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%;
     .top {

src/views/holding/holding1_add.vue

@@ -1,14 +1,7 @@
 <!--  -->
 <template>
   <div class="holdingAdd">
-    <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>
+    <TabList :ind='1'/>
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">
@@ -102,22 +95,16 @@
 </template>
 
 <script>
+import TabList from '@/components/tabLeft.vue'
 import Holding1Dialog from './holding1_Dialog.vue'
 export default {
   name: 'HoldingAdd',
   components: {
-    Holding1Dialog
+    Holding1Dialog,
+    TabList
   },
   data () {
     return {
-      tabList: [
-        '藏品登记',
-        '入库管理',
-        '出库管理',
-        '藏品总账',
-        '藏品盘核',
-        '藏品注销'
-      ],
       value: [],
       options: [{
         value: 'zhinan',
@@ -349,9 +336,7 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    skip (index) {
-      this.$router.push(`/layout/holding${index}`).catch(() => {})
-    },
+
     // 多层选择器的事件
     handleChange (value) {
       console.log(value)
@@ -377,29 +362,6 @@ export default {
     font-weight: 800;
   }
   display: flex;
-  .left {
-    width: 220px;
-    min-width: 130px;
-    height: 868px;
-    background-color: #fff;
-    box-shadow: 1px 1px 10px 1px;
-    ul {
-      li:nth-of-type(2) {
-        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%;
     display: flex;

src/views/holding/holding1_audit.vue

@@ -1,14 +1,7 @@
 <!--  -->
 <template>
   <div class="holding0_audit">
-    <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>
+    <TabList :ind='1'/>
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">
@@ -106,24 +99,17 @@
 </template>
 
 <script>
+import TabList from '@/components/tabLeft.vue'
 import Holding0AuditDia from './holding0_audit_Dia.vue'
 export default {
   name: 'holding0_audit',
   // import引入的组件需要注入到对象中才能使用
-  components: { Holding0AuditDia },
+  components: { Holding0AuditDia, TabList },
   data () {
     // 这里存放数据
     return {
       // 点击查看显示弹窗
       isShow: false,
-      tabList: [
-        '藏品登记',
-        '入库管理',
-        '出库管理',
-        '藏品总账',
-        '藏品盘核',
-        '藏品注销'
-      ],
       fromData: {
         textarea: '',
         result: ''
@@ -159,9 +145,7 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    skip (index) {
-      this.$router.push(`/layout/holding${index}`).catch(() => {})
-    }
+
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {},
@@ -184,29 +168,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(2) {
-        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%;
     display: flex;

src/views/holding/holding1_look.vue

@@ -1,14 +1,7 @@
 <!--  -->
 <template>
   <div class="holding0_result">
-    <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>
+    <TabList :ind='1'/>
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">
@@ -84,23 +77,15 @@
 </template>
 
 <script>
+import TabList from '@/components/tabLeft.vue'
 export default {
   name: 'holding0_result',
-  // import引入的组件需要注入到对象中才能使用
-  components: { },
+  components: { TabList },
   data () {
     // 这里存放数据
     return {
       // 点击查看显示弹窗
       isShow: false,
-      tabList: [
-        '藏品登记',
-        '入库管理',
-        '出库管理',
-        '藏品总账',
-        '藏品盘核',
-        '藏品注销'
-      ],
       fromData: {
         textarea: ''
       },
@@ -129,9 +114,7 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    skip (index) {
-      this.$router.push(`/layout/holding${index}`).catch(() => {})
-    }
+
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {},
@@ -155,29 +138,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(2) {
-        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%;
     display: flex;

src/views/holding/holding2.vue

@@ -1,14 +1,7 @@
 <!--  -->
 <template>
   <div class="holding">
-    <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>
+    <TabList :ind='2'/>
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">
@@ -83,18 +76,13 @@
 </template>
 
 <script>
+import TabList from '@/components/tabLeft.vue'
 export default {
   name: 'Holding0',
+  components: { TabList },
   data () {
     return {
-      tabList: [
-        '藏品登记',
-        '入库管理',
-        '出库管理',
-        '藏品总账',
-        '藏品盘核',
-        '藏品注销'
-      ],
+
       type: '',
       time: '',
       // 表格数据
@@ -118,9 +106,7 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    skip (index) {
-      this.$router.push(`/layout/holding${index}`).catch(() => {})
-    }
+
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {},
@@ -143,29 +129,6 @@ export default {
     font-weight: 800;
   }
   display: flex;
-  .left {
-    width: 220px;
-    height: 868px;
-    min-width: 130px;
-    background-color: #fff;
-    box-shadow: 1px 1px 10px 1px;
-    ul {
-      li:nth-of-type(3) {
-        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%;
     .top {

src/views/holding/holding3.vue

@@ -1,14 +1,7 @@
 <!--  -->
 <template>
   <div class="holding">
-    <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>
+    <TabList :ind='3'/>
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">
@@ -117,20 +110,14 @@
 </template>
 
 <script>
+import TabList from '@/components/tabLeft.vue'
 export default {
   name: 'Holding0',
+  components: { TabList },
   data () {
     return {
       // 控制显示表格还是图片
       change: 0,
-      tabList: [
-        '藏品登记',
-        '入库管理',
-        '出库管理',
-        '藏品总账',
-        '藏品盘核',
-        '藏品注销'
-      ],
       type: '',
       sourceVal: '',
       age: '',
@@ -175,9 +162,6 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    skip (index) {
-      this.$router.push(`/layout/holding${index}`).catch(() => {})
-    },
     // 控制显示表格还是图片
     pattern (index) {
       this.change = index
@@ -205,29 +189,6 @@ export default {
   }
 
   display: flex;
-  .left {
-    width: 220px;
-    height: 868px;
-    min-width: 130px;
-    background-color: #fff;
-    box-shadow: 1px 1px 10px 1px;
-    ul {
-      li:nth-of-type(4) {
-        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%;
     .top {

src/views/holding/holding3_look.vue

@@ -1,14 +1,7 @@
 <!--  -->
 <template>
   <div class="holding3_look">
-    <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>
+    <TabList :ind='3'/>
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">
@@ -115,13 +108,11 @@
 </template>
 
 <script>
-// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-// 例如：import 《组件名称》 from '《组件路径》';
-
+import TabList from '@/components/tabLeft.vue'
 export default {
   name: 'Holding3_look',
   // import引入的组件需要注入到对象中才能使用
-  components: {},
+  components: { TabList },
   data () {
     // 这里存放数据
     return {
@@ -150,9 +141,7 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    skip (index) {
-      this.$router.push(`/layout/holding${index}`).catch(() => {})
-    }
+
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {},
@@ -177,29 +166,6 @@ body {
     font-weight: 800;
   }
   display: flex;
-  .left {
-    width: 220px;
-    min-width: 130px;
-    height: 868px;
-    background-color: #fff;
-    box-shadow: 1px 1px 10px 1px;
-    ul {
-      li:nth-of-type(4) {
-        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/初始化.vue

@@ -1,14 +1,7 @@
 <!--  -->
 <template>
   <div class="holdingAdd">
-    <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>
+    <TabList :ind='4'/>
     <div class="right">
       <div class="top">
         <el-breadcrumb separator="/">
@@ -24,24 +17,15 @@
 </template>
 
 <script>
-// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-// 例如：import 《组件名称》 from '《组件路径》';
-
+import TabList from '@/components/tabLeft.vue'
 export default {
   name: 'HoldingAdd',
   // import引入的组件需要注入到对象中才能使用
-  components: {},
+  components: { TabList },
   data () {
     // 这里存放数据
     return {
-      tabList: [
-        '藏品登记',
-        '入库管理',
-        '出库管理',
-        '藏品总账',
-        '藏品盘核',
-        '藏品注销'
-      ]
+
     }
   },
   // 监听属性 类似于data概念
@@ -50,9 +34,7 @@ export default {
   watch: {},
   // 方法集合
   methods: {
-    skip (index) {
-      this.$router.push(`/layout/holding${index}`).catch(() => {})
-    }
+
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {},
@@ -74,29 +56,6 @@ export default {
     font-weight: 800;
   }
   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%;
     display: flex;