index.vue 2.08 KB
<template>
  <el-container>
    <el-aside width="250px">
      <el-menu
        :default-active="index">
        <el-submenu v-for="data in leftList" :key="data.id" :index="data.name">
          <template slot="title">
            <span>{{data.name}}({{data.children | lengthNum}})
            </span>
          </template>
          <el-submenu :index="item.name" v-for="item in data.children" :key="item.id">
            <span slot="title">
              {{item.name}}
              <i class="iconfont icon-shangyi"></i>
              <i class="iconfont icon-xiayi"></i>
              <i class="iconfont icon-bianji"></i>
              <i class="iconfont icon-shanchu"></i>
            </span>
            <el-menu-item :index="i.name" v-for="i in item.children">
              {{i.name}}
              <i class="iconfont icon-shangyi"></i>
              <i class="iconfont icon-xiayi"></i>
              <i class="iconfont icon-bianji"></i>
              <i class="iconfont icon-shanchu"></i>
            </el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <that-list :id="id"></that-list>
    </el-main>
  </el-container>
</template>

<script>
  import {getCategoryApi} from "../../service/api";
  import thatList from './list'
  export default {
    data(){
      return {
        leftList:[],
        index:'',
        id:''
      }
    },
    components:{
      thatList
    },
    filters:{
      lengthNum:function (value) {
        if(value){
          return value.length
        }else{
          return '0'
        }

      }
    },
    methods:{
      getList(){
        getCategoryApi('').then(res=>{
          this.leftList = res;
          if(this.id === ''){
            this.id = res[0].children[0].id;
            this.index = res[0].children[0].name
          }
        })
      },
      chooseId(data){
        this.id = data.id
      }
    },
    mounted(){
      this.getList()
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .el-container{
    height: 100%;
    .el-menu{
      height: 100%;
    }
  }
</style>