DLBWG_CK/src/components/tabLeft3.vue

<template>
    <div class="left">
      <ul>
        <li :class="{active:ind===item.id}" v-for="(item, index) in tabList" :key="index" @click="skip(item.id)">
          <img :src="require('@/assets/inco/statistics'+item.id+'.png')" alt="" v-if="ind!==item.id">
          <img :src="require('@/assets/inco/statistics'+item.id+'ac.png')" alt="" v-else>
          {{ item.name }}
        </li>
      </ul>
    </div>

</template>

<script>
export default {
  components: {},
  props: {
    ind: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      tabList: [
        { name: '库房设置', id: 0, ip: 700 },
        { name: '统计报表', id: 1, ip: 999999 },
        { name: '藏品移库', id: 2, ip: 800 }
      ]
    }
  },
  methods: {
    skip (index) {
      this.$router.push(`/layout/statistics${index}`).catch(() => {})
    }
  },
  mounted () {
    // 获取用户权限数据
    let temp2 = localStorage.getItem('daliCK_limits')
    temp2 = JSON.parse(temp2)
    const tempList1 = []
    temp2.forEach(v => {
      if (v.authority) {
        if ((this.tabList.filter(p => p.ip === v.id))[0]) tempList1.push((this.tabList.filter(p => p.ip === v.id))[0])
      }
    })
    tempList1.push({ name: '统计报表', id: 1, ip: 99999 })
    this.tabList = tempList1
  }
}
</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;
        img{
          margin: 3px 15px 0 35px;
          width: 20px;
          height: 20px;
        }
      }
      li:hover{
        background:#3E5EB3 ;
      }
      .active {
        background:#3E5EB3 ;
        color: #fff;
      }
    }
  }</style>