vue递归组件--vue递归目录--vue递归tree

最新推荐文章于 2022-11-11 15:58:41 发布

csstmg

最新推荐文章于 2022-11-11 15:58:41 发布

阅读量291

点赞数

分类专栏：前端 element 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/csstmg/article/details/126288767

版权

前端同时被 2 个专栏收录

171 篇文章 1 订阅

订阅专栏

element

104 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<template>
<div>
   <div v-for="(item,index) in treedata" :key="index">
    <!-- itemNodeClick 点击 当前行 -->
      <div class="item-title" @click="itemNodeClick(item)">
        <span v-text="item.name" ></span>
        <span v-if="item.children && item.children.length">
          <!-- isOpen 控制箭头 -->
          <van-icon name="arrow-down" :class="{ 'negative-rotate': isOpen(item.id)}" style="transition: transform 0.3s"/>
        </span>
      </div>
      <!-- needid === 当前行id 的时候展开 -->
      <div v-if="item.children && item.children.length && needid === item.id" class="item-childen">
        <!-- 递归组件 -->
        <kshBiTree
          :treedata="item.children"
        />
      </div>
   </div>
</div>
</template>

<script>
import { sharesv1 } from '../api'
export default {
  name: 'kshBiTree',

  props: {
    treedata: {
      type: Array,
      default: () => []
    },
    needIx: {
      type: Number,
      default: () => null
    },
    active: {
      type: Number,
      default: () => null
    }
  },
  data () {
    return {
      needIndex: null,
      expandedKeys: [],
      needid: ''
    }
  },
  mounted () {
    this.needIndex = this.needIx
    console.log(this.treedata)
  },
  methods: {
    isOpen (id) {
      return this.needid === id
    },
    itemNodeClick (item) {
      if (item.children && item.children.length) {
        if (this.needid === item.id) {
          this.needid = ''
        } else {
          this.needid = item.id
        }
      } else {
        this.goLink(item)
      }
    },
    goLink (item) {
      const data = {
        authenticationMode: 'NONE',
        expiryDate: '',
        roles: [],
        rowPermissionBy: '',
        users: [],
        vizId: item.relId || item.id,
        vizType: this.active === 2 ? 'STORYBOARD' : item.relType
      }
      let key = 'shareStoryPlayer/'
      switch (item.relType) {
        case 'DATACHART':
          key = 'shareChart/'
          break
        case 'DASHBOARD':
          key = 'shareDashboard/'
          break
        default:
          break
      }
      sharesv1(data).then(res => {
        window.location.href = (process.env.NODE_ENV === 'prod' ? 'https://dataenginebi.71360.com/shareChart/' : 'https://predataenginebi.71360.com/' + key + res.data.id + '?type=NONE')
      })
    },

    clickIcon (item) {
      console.log(item)
    }

  }
}
</script>

<style lang="scss" scoped>
.item-title{
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #fafafa;
}
 .foldTop{
      display: flex;
      height: 0.8rem;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #fafafa;
    }
    .foldText{
      height: 0.8rem;
      line-height: 0.8rem;
      border-bottom: 1px solid #fafafa;
    }
    .p20{
      padding-left: .4rem;
    }
    /deep/.arrowIcon{
      transition: 0.2s;
      transform-origin: center;
      transform: rotateZ(90deg);
    }
    /deep/.arrowIconTwo.van-icon{
      transition: 0.2s;
      transform-origin: center;
      transform: rotateZ(-90deg);
    }
    .negative-rotate{
      transform: rotateZ(-180deg);
    }
    .item-childen{
      padding-left: 20px
    }
</style>

在这里插入图片描述

数组转成树结构

  arrToTree (data) {
      // 你的代码
      // 先把传进来的数据的 name 修改为 label 再删除 name
      // data.map(item => {
      //   item.label = item.name
      //   delete item.name
      // })
      // 声明空数组 接收最后的结果
      const arr = []
      // 定义空对象 接收每个人的信息并准备划分层级
      const obj = {}
      // 判断传送进来的值是否为数组，可以使用Array.isArray()方法判断，也可以用instanceof Array 进行判断
      if (!(data instanceof Array)) {
        return arr
      }
      // 循环 data 先把所有的数据放进一个对象里
      data.forEach(item => {
        obj[item.id] = item
      })
      // 定义遍历删除id、job、pid的方法
      //function del (del) {
        //return del.forEach(i => {
          // delete i.id
          // delete i.job
          // delete i.parentId
        //})
      //}
      data.forEach(item => {
        if (obj[item.parentId]) {
          if (obj[item.parentId].children) {
            obj[item.parentId].children.push(item)
            // 遍历删除id、job、pid
            // del(obj[item.parentId].children)
          } else {
            ;(obj[item.parentId].children = []).push(item)
            // del(obj[item.parentId].children)
          }
        } else {
          arr.push(item)
          // del(arr)
        }
      })
      return arr
    },