element中使用树tree

基础

一、属性

1、props

elementUI的树指定了固定的数据格式，但是后台返回的数据并不一致，所以提供了这个属性进行快速替换。

• label: 指定节点标签为节点对象的某个属性值
• children: 指定子树为节点对象的某个属性值
• disabled: 指定节点选择框是否禁用为节点对象的某个属性值
• isLeaf: 指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效

<el-tree 
  :data="data" 
  :props="defaultProps">
</el-tree>

<script>
  export default {
    data() {
      return {
        data: [{
          name: '一级',
          folderList: [{
            name: '二级',
            folderList: [{
              name: '三级'
            }]
          }]
        }],
        defaultProps: {
          children: 'folderList',
          label: 'name'
        }
      };
    },
  };
</script>

2、default-expand-all

default-expand-all: 是否默认展开所有节点

<el-tree 
  :data="data" 
  :props="defaultProps"
  default-expand-all>
</el-tree>

3、default-expanded-keys

default-expanded-keys: 默认展开的节点的 key 的数组
必须设置node-key，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。

<el-tree
  :data="data"
  show-checkbox
  node-key="id"
  :default-expanded-keys="[2, 3]"
  :props="defaultProps">
</el-tree>

4、default-checked-keys

default-checked-keys: 默认勾选的节点的 key 的数组
必须设置node-key，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。

<el-tree
  :data="data"
  show-checkbox
  node-key="id"
  :default-checked-keys="[5]"
  :props="defaultProps">
</el-tree>

如果后台返回的数据中没有唯一的标志字段，比如不同层级间的id可能会重复，则需要自己处理一番。
后台返回的数据中会有id和层级，可以将两者拼接在一起做为唯一标志。
util.js
示例将后台返回的固定字段拼接在了一起，为整棵树添加了一个唯一性的标志字段，视情况修改。

export default {
  // 树添加唯一性标志
  addTreeMark (originData) {
    originData.forEach((item,key)=>{
      item.idlevel=`${item.id}&${item.level}`
      if(item.areaList){
        this.addTreeMark(item.areaList);
      }
    });
  },
}

组件

import util from '../js/util';

// 为整棵树的数据添加唯一性标志字段
util.addTreeMark(res.data)

// 对获取的详情数据进行处理
let { areaList } = res.data;
areaList.forEach((item) => {
    item.idlevel = `${item.id}&${item.level}`
});
this.defaultCheckList = areaList.map(item => item.idlevel)

5、check-strictly

check-strictly: 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
即当你选择了父节点，所有的子节点不会被选中。
当你选择了子节点，父节点不会被全选或者半选。

6、expand-on-click-node

:expand-on-click-node="false": 是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。

7、highlight-current

:highlight-current="true": 是否高亮当前选中节点，默认值是 false。

二、事件

1、node-click

节点被点击时的回调，共三个参数，依次为：
1> 传递给 data 属性的数组中该节点所对应的对象、
2> 节点对应的 Node、
3> 节点组件本身。
可以根据以上信息对数据进行一番处理。

<el-tree 
  :data="data" 
  :props="defaultProps" 
  @node-click="handleNodeClick">
</el-tree>

handleNodeClick(data) {
  console.log(data);
}

三、方法

选择及回显

---

1、getCheckedKeys 获取全选中

方法：若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组
参数：(leafOnly) 接收一个 boolean 类型的参数，若为 true 则仅返回被选中的叶子节点的 keys，默认值为 false
使用：给树加ref,直接调用即可

2、setCheckedKeys 设置选中

方法：通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性
参数：(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 true 则仅设置叶子节点的选中状态，默认值为 false
使用：给树加ref,直接调用即可

3、getHalfCheckedKeys 获取半选中

方法：若节点可被选择（即 show-checkbox 为 true），则返回目前半选中的节点的 key 所组成的数组
使用：给树加ref,直接调用即可

高亮选中状态

---

4、setCurrentKey 高亮和取消高亮

方法：通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性
参数：(key) 待被选节点的 key，若为 null 则取消当前高亮的节点
使用：给树加ref,直接调用即可

// 设置选中状态
this.$nextTick(() => {
  this.$refs.folderTree.setCurrentKey(data.id)
})  

5、getCurrentKey 获取高亮节点

方法：获取当前被选中节点的 key，使用此方法必须设置 node-key 属性，若没有节点被选中则返回 null
使用：给树加ref,直接调用即可

案例

demo1、树节点面包屑

方式一：简单的话可以下面这样做

export default {
  data(){
    return{
      breadList:[],     //面包屑数组
    }
  },
  methods:{
    // 选择节点
    getCurentNode (data){
      let tree = this.$refs.tree;
      this.breadList = []; //初始化
      this.getTreeNode(tree.getNode(data.value));
    },
    // 获取当前树节点和其父级节点
    getTreeNode(node){
      if (node) {
        if (node.label !== undefined) {
          this.breadList.unshift(node.label); //在数组头部添加元素
          this.getTreeNode(node.parent); //递归
        }
      }
    }
  }
}

上述代码好像是拿不到值的，原因是getNode()获取不到当前节点
可以打印出整个tree控件看一下
获取到当前节点：this.$refs.currentNode.node
但是我忘了怎么修改的了，我是最开始按这个思路写的，后来把代码回滚了，没有记录了，以后补充下。
方式二：让后端给你返回面包屑的数据
因为业务需求的原因，前端做不到面包屑了，是因为在所有页面都要展示这个面包屑。这时候我就没办法了，只能让后端给我。你也可以直接让后端做，反正后端能实现。
我把当前节点都存储在本地，获取面包屑是将当前节点的id给后端，由后端递归返回面包屑数据，我再进一步处理。
封装了一个业务组件，在每个需要的页面调用，触发是通过bus触发的

<template>
  <div class="breadcumb">
    <div class="breadcumb-list">
      <div v-for="(item, i) in list" :key="i" class="breadcumb-link" :class="{last: i == list.length -1}">
        <i @click="jump(item)" :title="item.name">{{breadShow(item)}}</i>        
        <span v-if="i < list.length - 1"> &gt; </span>
      </div>
    </div>
  </div>
</template>

<script>    
import bus from '@/common/bus'
import api from "@/servers/api"    
export default {
    name: "BodyBread",
    data() {
        return {                
          list: [],
          newTime: '',               
        }
    },    
    watch: {
      newTime () {
        this.getBread()
      },
    },
    mounted () {
      bus.$on('bread', (e) => {    // 监听面包屑要发生变化         
          if (e) {
            this.newTime = e                  
          }
      })
    },    
    methods:{
      // 获取面包屑文件夹层级树
      getBread () {
        let treeNode = JSON.parse(localStorage.getItem('treeNode')) 
        const params = {
          id: treeNode.id,
          personId: localStorage.getItem('personId'),
          userDisplayName: localStorage.getItem('userDisplayName'),             
        } 
        let url = `?id=${params.id}&personId=${params.personId}&userDisplayName=${params.userDisplayName}`               
        api.dicManage.dicBread(url).then((res) => {                             
          if (res.status == 200) {                
            if (res.data.code == 0) {                        
              this.list = []  
              // 处理文件夹层级树数据,转为一维数组  
              this.convertTree(res.data.data)
              // 如果是文件,则面包屑添加文件为末级节点
              if (this.$route.path == '/fileDetail' || this.$route.path == '/fileEdit' || this.$route.path == '/permissionFile') {
                let fileNode = JSON.parse(localStorage.getItem('fileNode')) 
                fileNode.name = fileNode.name ? fileNode.name : fileNode.documentName                
                this.list.push(fileNode);
              }                                  
            }
          }                   
        }).catch((err) => {
          
        }) 
      },
      // 转换树为一维数组
      convertTree (tree) {            
        tree.forEach((item,index,arr) => {
          this.list.push(item);              
          // 如果有子节点，递归
          if (item.children) {
            this.convertTree(item.children);
          }                                                    
        })
      },
      // 跳转面包屑导航
      jump (item) {
        // 如果当前页面是首页则刷新数据
        // 如果当前页面是文件夹层级则跳转首页
        // 如果是当前页面是文件层级则判断导航对象类型,是文件夹跳首页,是文件则跳详情
        // 这里不需要做权限控制,权限在对应的文件夹首页及文档页已经存储
        if (this.$route.path == '/home') {
          this.$emit('refreshList', item)
        }else if (this.$route.path == '/folderAdd' || this.$route.path == '/fileAdd' || this.$route.path == '/permissionFolder') {
          let treeInfo = JSON.stringify(item)
          localStorage.setItem('treeNode', treeInfo)
          this.$router.push({
              path: '/home',          
          }); 
        }else if (this.$route.path == '/fileDetail') {
          if (item.type == 'file') {

          }else {
            let treeInfo = JSON.stringify(item)
            localStorage.setItem('treeNode', treeInfo)
            this.$router.push({
                path: '/home',          
            });
          }
        } else if (this.$route.path == '/fileEdit' || this.$route.path == '/permissionFile') {
          if (item.type == 'file') {
            this.$router.push({
                path: '/fileDetail',          
            }); 
          }else {
            let treeInfo = JSON.stringify(item)
            localStorage.setItem('treeNode', treeInfo)
            this.$router.push({
                path: '/home',          
            });
          }
        }
      },  
      //  
      breadShow (item) {        
        let str = ''
        if (item) {          
          if (item.name.length > 15) {
            str = `${item.name.substring(0,12)}...`
          }else {
            str = item.name
          }
        }                
        return str
      },     
    },
}
</script>

<style lang="less" scoped>
  @baseColor: #0088cc;
  .breadcumb{
    min-height: 38px;    
    margin: 0 15px;    
    box-sizing: border-box;
    border-bottom: 1px solid #E1E1E1;
    .breadcumb-list {
      .breadcumb-link{
        height: 38px;       
        line-height: 38px;
        display: inline-block;
        i {
          color: #333;
          font-size: 12px;
          cursor: pointer;
        }
        span{
          padding: 0 6px;                  
        }
        &.last{
          i {
            color: @baseColor
          }
        }
      }
    }
  }
</style>

样式

1、超出部分自动换行

el-tree 组件外部加个div 添加class="tree"

<div class="tree">
  <el-tree ref="folderTree" :data="data" :props="defaultProps" @node-click="getCurentNode" node-key="id"
  default-expand-all :expand-on-click-node="false" :highlight-current="true"></el-tree> 
</div> 

.tree {
  .el-tree-node {
    white-space: normal;
    .el-tree-node__content {
      height: 100%;
      align-items: start;
    }
  }
}

网站导航

网站导航