关于递归Collapse 折叠面板和实现分层折叠互斥效果

近期要用Collapse 折叠面板实现一个递归效果，直接上效果图，实现最终效果是每一层的内容互斥,组件递归的的时候为了实现每一层内容互斥要给每一个el-collapse加上一个v-model,也就是说互斥效果是因为v-model实现的，只要每一个递归出来的el-collapse都有一个独自的v-model就可以实现分层互斥

 

 

 子组件代码

<template>
  <div>
    <template v-for="(item,index) in reTreeData ">

      <el-collapse-item v-if="item.type==1 ||item.type==0" :key="item.id" :name="item.id">
        <!--<div v-if="item.type==1">-->
        <!--<div v-if="item.type==1 && item.children.length > 0">-->
        <template slot="title">
          <!--<template v-if="item.type == '1'">-->
          {{item.nodeName}}
          <!--</template>-->
        </template>

        <!--</div>-->

        <!--<template v-else>-->
        <el-collapse accordion v-model="collapseItemActiveName">
          <collapseItem :treeData="item.children"></collapseItem>
        </el-collapse>
        <!--</template>-->


      </el-collapse-item>
      <span v-else>
        <!--<template v-if="item.type==2">-->
          <el-button round @click="startFlow(item)" size="mini" >
            {{item.nodeName}}
          </el-button>
        <!--</template>-->
      </span>
    </template>



  </div>
</template>

<script>

export default {
  name:'collapseItem',
  props: {
    treeData:{
      type:Array
    }
  },
  data () {
    return {
      collapseItemActiveName:''
    }
  },
  created() {},
  computed:{
    reTreeData(){
      let reTreeData
      reTreeData= this.treeData
      reTreeData.sort((a,b) =>
        a.type - b.type
      )
      return reTreeData
    }
  },
  methods: {

    startFlow(item){
      this.$router.push({
        path: '/approval/process-start/new-channel-fee-before',
        query: {
          actType: 'new',
          disburseBusiness: item.nodeCode
        }
      })
      this.$store.commit('breadcrumb/SET_BTNNAME', item.nodeName || '未定义标题')
    }
  }
 }
</script>

<style scoped >
  /deep/.el-collapse-item__content{
    padding-bottom:0px
  }
  /deep/.el-collapse-item .el-collapse-item__wrap{
      padding: 0 20px;
    }
/deep/.el-button {
  margin:5px 10px 5px 0
}
</style>

父组件相关代码

   <div style="overflow: auto;padding:0 20px">
      <el-collapse accordion v-model="activeName" v-if="styleRadio == 1? true : false">
        <collapseItem :treeData = "treeData" ></collapseItem>
      </el-collapse>
    </div>

//

treeData的数据格式type是1或者0时，有子项，type为2时则没有子项，最小粒度为type为2

      // [ {
      //   "id": "949dde43-0d2a-4b65-9296-dc0f10932c46",
      //   "nodeCode": "fee_sub00000001",
      //   "nodeName": "渠道费",
      //   "type": "1",
      //   "parentId": "root",
      //   "ifRoot": false,
      //   "children": [
      //     {
      //       "id": "8301d277-77a7-473b-bc8b-fc2f3aa2cee3",
      //       "nodeCode": "85aa4bf3-293a-558f-15dc-6716e9e67891",
      //       "nodeName": "销售部费用",
      //       "type": "0",
      //       "parentId": "949dde43-0d2a-4b65-9296-dc0f10932c46",
      //       "ifRoot": false,
      //       "children": [
      //         {
      //           "id": "1039a8c6-93bc-40a6-bcb5-833ac74a4c12",
      //           "nodeCode": "cdcc9f3f-6666-4ea8-aebb-54e29b6fd0c9",
      //           "nodeName": "团建费用",
      //           "type": "2",
      //           "parentId": "8301d277-77a7-473b-bc8b-fc2f3aa2cee3",
      //           "ifRoot": false,
      //           "children": [],
      //           "templateName": "团建费用"
      //         },
      //         {
      //           "id": "3425c258-9e9d-4866-9842-10a3c5a44824",
      //           "nodeCode": "32f7f237-a840-4d34-a2b0-668b15db6c50",
      //           "nodeName": "团建费用",
      //           "type": "2",
      //           "parentId": "8301d277-77a7-473b-bc8b-fc2f3aa2cee3",
      //           "ifRoot": false,
      //           "children": [],
      //           "templateName": "团建费用"
      //         },
      //         {
      //           "id": "1dd20bed-5d72-4b8e-b23c-e9d92aecd54f",
      //           "nodeCode": "2164a786-4eec-4c7f-a340-4aa5df310cbf",
      //           "nodeName": "团建费用",
      //           "type": "2",
      //           "parentId": "8301d277-77a7-473b-bc8b-fc2f3aa2cee3",
      //           "ifRoot": false,
      //           "children": [],
      //           "templateName": "团建费用"
      //         }
      //       ],
      //       "templateName": null
      //     },
      //     {
      //       "id": "691437d7-3210-4e69-a326-95a1be502b9a",
      //       "nodeCode": "4c51ba12-74c5-4b8d-92b9-08ac4f6c1683",
      //       "nodeName": "进场费用",
      //       "type": "2",
      //       "parentId": "949dde43-0d2a-4b65-9296-dc0f10932c46",
      //       "ifRoot": false,
      //       "children": [],
      //       "templateName": "进场费用"
      //     },
      //     {
      //       "id": "c1a950a4-3fc3-488b-8ef1-aae4504827cf",
      //       "nodeCode": "f2eb0736-1761-4dde-bfae-18d8eb9c562a",
      //       "nodeName": "赠酒活动",
      //       "type": "2",
      //       "parentId": "949dde43-0d2a-4b65-9296-dc0f10932c46",
      //       "ifRoot": false,
      //       "children": [],
      //       "templateName": "赠酒活动"
      //     },
      //     {
      //       "id": "706bd9b8-3c7f-41ed-9458-0c2bda2832cb",
      //       "nodeCode": "YT000000000000019",
      //       "nodeName": "油费",
      //       "type": "1",
      //       "parentId": "949dde43-0d2a-4b65-9296-dc0f10932c46",
      //       "ifRoot": false,
      //       "children": [],
      //       "templateName": null
      //     },
      //     {
      //       "id": "19514d4f-f7b6-4ecc-947a-f4ce631a3eba",
      //       "nodeCode": "fee_sub00000055",
      //       "nodeName": "车辆费用",
      //       "type": "1",
      //       "parentId": "949dde43-0d2a-4b65-9296-dc0f10932c46",
      //       "ifRoot": false,
      //       "children": [
      //         {
      //           "id": "b1a6d668-fcb8-48f5-82ac-d47204e54674",
      //           "nodeCode": "5829d852-9c8e-423d-a6ad-f91d8674ff7d",
      //           "nodeName": "陈列费用（0819）",
      //           "type": "2",
      //           "parentId": "19514d4f-f7b6-4ecc-947a-f4ce631a3eba",
      //           "ifRoot": false,
      //           "children": [],
      //           "templateName": "陈列费用（0819）"
      //         },
      //         {
      //           "id": "d4ae6dc5-ef89-4ceb-b3ce-a8925d207c7a",
      //           "nodeCode": "aab5ac15-e478-4bdd-8d75-7b19e5f2d2c0",
      //           "nodeName": "H费用子项列支(根据金额分摊)",
      //           "type": "2",
      //           "parentId": "19514d4f-f7b6-4ecc-947a-f4ce631a3eba",
      //           "ifRoot": false,
      //           "children": [],
      //           "templateName": "H费用子项列支(根据金额分摊)"
      //         }
      //       ],
      //       "templateName": null
      //     }
      //   ],
      //   "templateName": null
      // }]