DLBWG_CK/src/components/tabLeft2.vue

<template>
    <div class="left">
      <ul>
        <li :class="{active:ind===item.id}" v-for="(item, index) in tabList" :key="index" @click="skip(item.id)">
          <i :class="item.inon"></i>
          {{ item.name }}
        </li>
      </ul>
    </div>

</template>

<script>
export default {
  components: {},
  props: {
    ind: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      tabList: [
        { name: '征集品总账', id: 0, inon: 'el-icon-s-order' },
        { name: '征集品提用', id: 1, inon: 'el-icon-caret-left' },
        { name: '征集品注销', id: 2, inon: 'el-icon-delete-solid' }
      ]
    }
  },
  methods: {
    skip (index) {
      this.$router.push(`/layout/collect${index}`).catch(() => {})
      // 如果从别的tab栏点击藏品总账，就自动刷新页面获取最新信息
      this.$nextTick(() => {
        setTimeout(() => {
          if (this.ind !== index && index === 0) location.reload(true)
        }, 200)
      })
    }
  }
}
</script>
<style lang='less' scoped>
  .left {
    width: 220px;
    min-width: 130px;
    height: 868px;
    background-color: #fff;
    box-shadow: 1px 1px 10px 1px;
    ul {
      li {
        cursor: pointer;
        color: black;
        font-size: 16px;
        height: 60px;
        display: flex;
        align-items: center;
        i {
          margin: 0 18px;
        }
      }
      li:hover{
        background:#e6f7ff ;
      }
      .active {
        background:#e6f7ff ;
      }
    }
  }</style>