首页 > 其他分享 >关于递归Collapse 折叠面板和实现分层折叠互斥效果

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

时间:2023-01-03 09:24:18浏览次数:55  
标签:false Collapse 折叠 nodeCode 互斥 parentId type children nodeName

近期要用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 // }]

 

 

标签:false,Collapse,折叠,nodeCode,互斥,parentId,type,children,nodeName
From: https://www.cnblogs.com/harryzong/p/17021062.html

相关文章

  • Linux线程互斥
    写在前面这个博客的内容很少,但是很关键,这是我们线程安全相关的内容,里面会涉及到线程互斥和加锁的相关观念,总体而言还是很难的.线程互斥先看一下下面的代码,这里是一切的......
  • 集大成之作-候选体折叠图合成
    前期做了很多尝试,终于将候选体判断图又推进一步。效果图如下:  2022-12-29 ......
  • el-tree全部展开全部折叠方法
    转:el-tree全部展开全部折叠//折叠所有节点setAllFold(){for(vari=0;i<this.$refs.tree.store._getAllNodes().length;i++){this.$refs.tree.store......
  • 信号量/互斥锁/条件变量
     1.信号量和互斥锁的使用场合锁的特性就是保护临界资源的,一个线程A加锁,另一个线程B解锁,不合常理。A正在操作临界资源,B把A对临界资源的操作权限去除了……线程间同步”的......
  • 线程之间的同步和互斥
                          ......
  • linux网络编程-线程——通过信号控制互斥锁
    1//由于pthread库不是Linux系统默认的库,连接时需要使用库libpthread.a,所以在使用pthread_create创建线程时,在编译中要加-lpthread参数2//gccpthread_sig_mutex.c-......
  • linux网络编程-线程间通信——互斥锁
    为了保证线程在执行某段代码时不被其他线程打断,可以使用互斥锁进行保护,而这段被保护的代码区域被称为临界区。原理:线程执行锁定函数pthread_mutex_lock()时,如果锁没有被其......
  • Go 快速入门指南 - 互斥锁和定时器
    互斥锁对于任一共享资源,同一时间保证只有一个操作者,这种方法称为 ​​互斥机制​​。关键字 ​​Mutex​​​ 表示互斥锁类型,它的 ​​Lock​​​ 方法用于获取锁,​​U......
  • 不止于大,如何打造优秀的折叠屏应用体验
     自2019年发布了第一款折叠屏手机以来,华为不断创新,接连推出多款折叠屏新品。折叠屏手机越来越受到广大用户的青睐,其市场占有率也随之高速增长。而对应用开发者来说,在折叠......
  • 不止于大,如何打造优秀的折叠屏应用体验
    自2019年发布了第一款折叠屏手机以来,华为不断创新,接连推出多款折叠屏新品。折叠屏手机越来越受到广大用户的青睐,其市场占有率也随之高速增长。而对应用开发者来说,在折叠屏上......