使用elementui中el-collapse折叠面板 实现选项卡功能

实现效果：

点击左侧菜单--点谁谁变色，展示对应右侧的内容块

      <div class="data-dictionary dis">
        <!-- 左侧菜单标题-->
        <div class="data-dictionary-menu">
          <div class="tree-top">名称</div>
          <div class="tree-content">
            <el-collapse v-model="activeName"
                         accordion
                         v-for="(item,index) in dataTree"
                         :key="index">
              <div @click="menuClick(item.id)"
                   :class="activeIndex === item.id ? 'bottom-tabs-active' : ''"
                   style="line-height:40px;">{{ item.name }}</div>
            </el-collapse>
          </div>
        </div>
        <!-- 右侧内容区域---el-table表格 -->
        <div class="data-dictionary-table">
          <CustomerStage v-if="activeIndex === '1'" />
          <CustomerSource v-if="activeIndex === '2'" />
          <CustomerLevel v-if="activeIndex === '3'" />
          <CustomerIndustry v-if="activeIndex === '4'" />
          <CompanySize v-if="activeIndex === '5'" />
          <ContactType v-if="activeIndex === '6'" />
          <VendorVlass v-if="activeIndex === '7'" />
        </div>
      </div>

css

 <style lang="scss" scoped>
  .dis {
    display: flex;
  }
  .data-dictionary {
    .data-dictionary-menu {
      width: 20%;
      height: 100vh;
      margin-right: 20px;
      border: 1px solid rgb(222, 220, 220);
      border-radius: 4px;
      text-align: center;
      .bottom-tabs-active {
        // line-height: 40px;
        background-color: rgb(237, 244, 253);
      }
      .tree-top {
        color: #ffffff;
        padding: 20px 0px;
        border-radius: 4px 4px 0 0;
        background-color: rgb(34, 124, 229);
        border-bottom: 1px solid rgb(222, 220, 220);
      }
      .tree-content {
        padding: 0px 10px;
      }
    }
    .data-dictionary-table {
      width: 80%;
    }
  }
</style>

js

<script>
import CustomerStage from './CustomerStage.vue'
import CustomerSource from './CustomerSource.vue'
import CustomerLevel from './CustomerLevel.vue'
import CustomerIndustry from './CustomerIndustry.vue'
import CompanySize from './CompanySize.vue'
import ContactType from './ContactType.vue'
import VendorVlass from './VendorVlass.vue'
export default {
  components: {
    CustomerStage,
    CustomerSource,
    CustomerLevel,
    CustomerIndustry,
    CompanySize,
    ContactType,
    VendorVlass
  },
  data: function () {
    return {
      dataTree: [],
      activeIndex: '1', // 数据名称
      activeName: ''
    }
  },
  methods: {
    // 获取左侧的菜单
    getMainUnit () {
      this.$http.get(``).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        // console.log(res.data)
        this.dataTree = res.data
      })
    },
    // 点击获取分页
    menuClick (id) {
      // console.log(id, typeof id)
      this.activeIndex = id // 改变样式
      // console.log(this.activeIndex, this.activeName)
    }
  }
}
</script>