使用elementui中el-collapse折叠面板 实现下拉菜单

<template> 
        <div class="left-factor-library-name">
          <div class="left-tree">
            <div class="tree-top">表名称</div>
            <div class="sub-input">
              <el-input clearable
                        placeholder="搜索"
                        @input="factorNameSearch()"
                        v-model="factorName"
                        size="small"
                        clear="el-inp" />
            </div>
            <div class="tree-content"
                 v-if="dataTree&&dataTree.length>0">
              <!-- <el-collapse v-model="activeName"
                           accordion
                           v-for="(item,index) in dataTree"
                           :key="index">
                <el-tooltip class="item"
                            effect="dark"
                            :content="item.name"
                            placement="right">
                  <div @click="menuClick(item)"
                       :class="[activeIndex === item.id ? 'bottom-tabs-active' : '','collapse-items']"
                       style="line-height:30px;">
                    {{ item.name }}
                  </div>
                </el-tooltip>
              </el-collapse> -->
              <el-collapse v-model="activeName"
                           accordion
                           v-for="(item,index) in factorList"
                           :key="index">
                <el-collapse-item :title="item.typeName"
                                  :name="item.type"
                                  v-if="item.data&&item.data.length>0">
                  <div v-for="(i,inx) in item.data"
                       :key="inx">
                    <el-tooltip class="item"
                                effect="dark"
                                :content="i.name"
                                placement="right">
                      <div @click="menuClick(i)"
                           :class="[activeIndex === i.id ? 'bottom-tabs-active' : '','collapse-items']"
                           style="line-height:30px;">
                        {{ i.name }}
                      </div>
                    </el-tooltip>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </div>
</template>

<script>
export default {
  data: function () {
    return {
      dataTree: [],
      activeIndex: '', // 数据名称
      activeName: ''
    }
  },
  mounted () {
    this.getMainUnit()
  },
  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
        this.activeIndex = res.data[0].id
 
        // res.data返回的是数组对象形式，需要进行修改。根据不同type划分新的数组对象
        if (res.data && res.data.length > 0) {
          // res.data.map((i) => {
          //   console.log(i)
          // })
          // 遍历数组
          for (var i = 0; i < res.data.length; i++) {
            // 判断新定义的数组有没有值  没有值则减第一个类给他赋值上去
            if (this.dataTree.length === 0) {
              this.dataTree.push({
                type: res.data[i].type,
                typeName: res.data[i].typeName,
                data: [res.data[i]]
              })
            } else { // 第一个完后 后面的有值了 使用findindex()方法进行比较 存在返回下标index 不存在则返回-1
              var index = this.dataTree.findIndex(item => {
                return item.type === res.data[i].type
              })
              // 判断index是否大于0 大于0则在该类的data push进该类别的数据
              if (index >= 0) {
                this.dataTree[index].data.push(res.data[i])
              } else { // 不存在则新建一个对象  push 进arr2 里面 作为第二个类
                this.dataTree.push({
                  type: res.data[i].type,
                  typeName: res.data[i].typeName,
                  data: [res.data[i]]
                })
              }
            }
          }
          // console.log(this.dataTree)
        }

      })
    },
    // 点击获取分页
    menuClick (id) {
      // console.log(id, typeof id)
      this.activeIndex = id // 改变样式
      // console.log(this.activeIndex, this.activeName)
    }
  }
}
</script>

<style lang="scss" scoped>

  .left-factor-library-name {
    width: 20%;

    .left-tree {
      width: 100%;
      height: 100vh;
      border: 1px solid rgb(222, 220, 220);
      // margin-right: 20px;
      border-radius: 4px;
      .tree-top {
        padding: 10px 20px;
        border-bottom: 1px solid rgb(222, 220, 220);
      }

      .sub-input {
        // background-color: #f0f0f0;
        height: 46px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        /deep/ .el-input {
          width: 90%;
        }
        // /deep/ .el-button{
        //   width: 28%;
        // }
      }
      .tree-content {
        // overflow-y: scroll;
        // padding: 10px 20px;
        .el-collapse {
          padding: 0px 14px;
        }
        .el-collapse-item__content {
          padding-bottom: 0;
        }
        .bottom-tabs-active {
          line-height: 30px;
          background-color: #e7f7f1;
          color: #21bb7e;
        }

        .collapse-items {
          cursor: pointer;
          line-height: 30px;
          height: 30px;
          border-bottom: 1px solid rgb(222, 220, 220);

          // 单行文字超出换行
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
</style>

 关于数据的处理

后端返的是

需要根据type分组 改为