element-ui树形结构转换

1.首先搞懂什么是树形结构,以及树形结构的基本用法

树是n（n>=0）个结点的有限集。当n = 0时，称为空树。
在任意一棵非空树中应满足：
有且仅有一个特定的称为根的结点。
当n>1时，其余节点可分为m（m>0）个互不相交的有限集T1,T2,…,Tm，其中每个集合本身又是一棵树，并且称为根的子树。

2.树形结构的基本使用

讲一下element-ui里的Tree 树形控件用法
举了一个小例子,看这张图,就大概能理解了

模板代码

          <el-tree :data="newList">
            <template v-slot="{ data }">
              <div class="top ">
                <div class="name">{{ data.name }}</div>
                <div class="manger">{{ data.manger }}</div>
                <el-dropdown>
                  <span class="el-dropdown-link">
                    操作<i class="el-icon-arrow-down"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>增加子部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </template>
          </el-tree>

data里的数据

  data () {
    return {
      list: [
        {
          name: '总裁办',
          manger: '大小林',
          children: [
            {
              name: '深圳分公司',
              manger: '管理员'
            }
          ]
        }
      ],
      newList: []
    }
  },

3.树形结构转换

步骤

# 1.只取到第一层数据
# 2.将pid写成变量形参
# 3.给找出来的项加一个children:[]
# 4.使用递归找出子集,子集的pid是自己的id

完整代码

<template>
  <div>
    <el-tree :data="newList" :props="{ label: 'name' }" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        { name: '广东', id: 1, pid: '' },
        { name: '广州', id: 2, pid: 1 },
        { name: '深圳', id: 3, pid: 1 },
        { name: '宝安', id: 4, pid: 3 },
        { name: '广西', id: 5, pid: '' },
        { name: '石岩', id: 6, pid: 4 },
      ],
      newList: []
    }
  },
  created () {
    // 只收第一层数据
    // console.log(this.changeChannel(this.list));
    this.newList = this.changeData(this.list, '')
    console.log(this.newList);
  },
  methods: {
    // 树形数据转换
    changeData (arr, pid) {
      return arr.filter(item => {
        if (item.pid === pid) {
          // 这个地方的item
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    }
  }

}
</script>

<style></style>