基础
一、属性
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"> > </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;
}
}
}
