elementui-tree组件浅谈

​
我们知道 , 在后台管理系统各种对于对于树形控件的使用频率是非常高的 , 所以在这里 , 我将主要讲解一下 tree树形控件的一些用法

因为elementUI上面有基础的用法 , 所以我就不进行基础使用的讲解了 , 我们直接来看他有关的一些方法或者属性

1. :data=“自定义数组”

自定义数组需要时多维数组 , 我们从后端接收到的一般都是平面的数组 , 接下来需要我们进行一个算法的转化

例如接收到的值为:

我们通过算法 :

得到转化后的值:

export function tranListToTreeData(list) {
  // 生成思路
  // 1. 遍历原数组 , 以原数组中的每一项id作为元素的key , 每一项本身作为value , 形成对象解构
  // 2. 遍历原数组 , 使用数组中的每一项pid , 去第一步形成的map结构去匹配key(id)
  // 如果匹配上 , 就把当前项放到节点的children属性中
  // 如果匹配不上 , 就把当前向直接放入到最终产出的treeList数组中

  // 最终要产出的数组
  const treeList = []
  // 所有项都使用对象存储起来
  const map = {}
  list.forEach(item => {
    if (!item.children) {
      item.children = []
    }
    // 依次放入到map中去 { key [item.id] : value [item] }
    map[item.id] = item
  })
  // 通过pid匹配id
  list.forEach(item => {
    const parent = map[item.pid]
    // 如果存在则表示item不是最顶层的数据
    if (parent) { // 匹配上了
      if (!parent.children) {
        parent.children = []
      }
      parent.children.push(item)
    } else {
      // 如果不存在 则是顶层数据
      treeList.push(item)
    }
  })
  // 返回出去
  return treeList
  // js复杂类型 存储的是内存的指针  一处修改 另外一处也会同步更新
}

2.:props=“defaultProps”

这个属性是修改自定义字段的一个方法 , tree组件在渲染的时候只接受label 和 children作为渲染字段 , 假如你接收到的值不是 , 那么就需要进行以上方法进行字段名称的一个转变

defaultProps:{
label:‘从后端接收到的值’,
children:‘从后端接收到的值’
}

3.@node-click=“handleNodeClick”

这个方法里面 , 我们可以获取三个参数 , 分别是获取的 :

字段对象 : 常用这里面的值进行一些操作(增删改查)

node值 : 查看这个对象是否被点开之类的布尔值,或者层级关系等

渲染组件对象(不常用)

4. 自定义插槽用法

这个方法属于进阶 , 比较重要

这里比较推荐官方的第二个用法 scoped-slot插槽用法 , scoped-solt用法会传入两个值 , 分别是Node对象 , 以及当前节点的数据data

使用场景 : 父组件中如果想使用子组件中的数据进行自定义内容的渲染 (table 单元格数据渲染)

这里面也是通过template自定义模板插槽获取当前的值进行操作 , 其实还是比较简单!

node.label : 当前字段

        <el-tree :data="list" :props="defaultProps" :default-expand-all="true">
          <!-- 以作用域插槽的形式定义模块 -->
          <template #default="{ data }">
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              style="height: 40px; width: 100%;"
            >
              <el-col :span="20">
              <- 当前一行的数据name ->
                <span>{{ data.name }}</span>
              </el-col>
              <el-col :span="4">
                <el-row type="flex" justify="end">
                  <!-- 两个内容 -->
                  <el-col>{{ data.manager }}</el-col>
                  <el-col>
                    <!-- 下拉菜单 element -->
                    <el-dropdown>
                      <span> 操作<i class="el-icon-arrow-down" /> </span>
                      <!-- 下拉菜单 -->
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="addDepartment(data.id)">添加子部门</el-dropdown-item>
                        <el-dropdown-item @click.native="editDepartment(data.id)">编辑部门</el-dropdown-item>
                        <el-dropdown-item @click.native="del(data.id)">删除部门</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </template>
  </el-tree>

自定义内容其实还是比较简单 , 就是通过elementUI的自定义插槽 , 获取当前行的数据进行一些操作而已
​
以上就是tree表单的全部内容 , 你可以试一下 , 然后进行一些操作!