yos_web/src/SDrpManagement/ProductGroup/modules/classTree.vue

<template>
  <div>
    <div class="flex-start">
      <div v-for="item in data" :key="item.index" @click.stop="classClick(item)">
        <p class="classItem" v-if="item.index === 1"  :class="class_act === item.itemclassnum?'act':''">{{item.itemclassname}}</p>
        <p class="classItem"  v-else   :class="class_act === item.itemclassnum?'act':''">{{item.itemclassname}}</p>
        <Tree v-if="item.subdep && class_act === item.itemclassnum" :data="item.subdep"></Tree>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Tree",
  props:['data'],
  inject:['selectThis'],
  data () {
    return {
      activeClass:{},
      class_act:0,
    }
  },
  methods:{
    classClick (item) {
      console.log(item)
      this.activeClass = item
      this.class_act = item.itemclassnum
      this.selectThis().change(item)
    },
  }
}
</script>
<style scoped>
.class-item{
  margin:0 15px;
  color: #333;
  cursor: pointer;
  transition: .2s all linear;
  font-size: 14px;
  
}
.right-line {
  border-right: 1px solid #e3e5ea;
  padding-right: 10px;
}
.act{
  color:#3874f6;
  font-weight: bold;
}
.classIndex{
  margin-bottom: 0px
  !important;
}
.classItem{
  margin: 10px 40px;
  padding-right: 10px;
  border-right: 1px solid #e3e5ea;
  font-size:14px !important;
  cursor: pointer;
}
.classItem:nth-of-type(1) {
  margin-left: 0;
}
.flex-start{
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  position: relative;
}
</style>