npm install vue-el-tree-custom
请先安装element-ui
import vueElTreeCustom from 'vue-el-tree-custom/src/index'
Vue.use(vueElTreeCustom)
部分方法常用都已经是按element-ui中tree 进行封装
文档参考官网 https://element.eleme.io/#/zh-CN/component/tree
gitee网址 https://gitee.com/q1782934950/vue-el-tree-custom
1.增加获取当前节点的所有上级的父级的node-key集合的方法getNodeParent 参数data
1.优化取消编辑的input显示问题
2.增加点击按钮选中node
1.样式提取
2.按钮显示修改,按层级显示,详见下
1.confirmEditNode 修改删除 增加加载loading 自行调用done 方法关闭
1.修复nodeKey为0时出现的bug
2.增加节点展开记录功能,更新treeList保持节点打开状态
增加tree-variables.scss颜色变量
可自行修改
$v-bgHoverColor: #fce2c0; // tree item 背景颜色
$v-transitionTime: 0.5s;
$v-i-plus-color: #409eff;
$v-i-edit-color: #ee7600;
$v-i-delete-color: #ff0000;
$v-i-hover-color: #fff;
$v-font-color: #000;
展开层级 默认 1 展开父节点 2 展开 父节点以及子节点
类型数值
修改 新增 删除 是否两边对齐
默认 true
自定义树节点的图标
模糊搜索框 默认 true
false 不显示
true 显示
外边框显示 默认 true
false 不显示
true 显示
tree 数据 默认可能会有测试数据(会忘记)
可自行源码删除
搜索字段 默认 label
默认 请输入关键字
默认 500
默认 "100%"
是否在第一次展开某个树节点后才渲染其子节点
默认 true
是否在点击节点的时候展开或者收缩节点
默认值为 false
如果为 false,则只有点箭头图标的时候才会展开或者收缩节点
默认 false 不显示
在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false
是否每次只打开一个同级树节点展开
每个树节点用来作为唯一标识的属性,整棵树应该是唯一的
默认 id
默认 {
children: "children",
label: "label",
}
label 指定节点标签为节点对象的某个属性值 string, function(data, node)
children 指定子树为节点对象的某个属性值 string
[true,true,true] 控制按钮显示 默认[false,false,false]
可填写数字 注意 0 表示全部层级显示 1 表示 1 和 1 以上层级显示 以此类推
示例 [0, false, 3] [1, 2, 3] [true, true, true] [true, false, true]
默认true 开启 false 关闭
false 发送事件 editNode
true 确定--confirmEditNode 取消--cancelEditNode
获取当前节点的所有上级的父级的node-key集合的方法getNodeParent 参数data
示例:this.$refs.tree.getNodeParent({
id: 31,
label: "31",
})
获取tree的nodesMap
参数可选 nodeKey
不传获取完整 nodesMap 传 参数(node-key) 获取对应的nodes
追加--append 同element中tree的append
为 Tree 中的一个节点追加一个子节点
(data, parentNode) 接收两个参数,1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node
parentNode 为 nul 不传 直接顶层追加
删除 Tree 中的一个节点,使用此方法必须设置 node-key 属性
传入参数则删除指定node 不传参数删除自身node
示例: this.$refs[name].remove()
根据自身调用需要删除节点
value=要删除的节点的 data 或者 node
this.$refs[name].remove(value)
通过 key 设置某个节点的当前选中状态,使用此方法必须设置 node-key 属性
(key) 待被选节点的 key,若为 null 则取消当前高亮的节点
getCheckedNodes , getCheckedKeys , getCurrentKey , getCurrentNode , getNode, getHalfCheckedNodes, getHalfCheckedKeys
setCurrentNode, setCurrentKey
node点击事件
返回 data, node, event
返回 node,data,instance,done,editLabel
instance -- 弹框实例 done -- 关闭弹框方法 editLabel -- 编辑的label
示例:
confirmEditNode({ node, data, instance, done,editLabel }) {
setTimeout(() => {
data.label = editLabel // 更新值
instance.confirmButtonLoading = false; // 取消按钮加载
done(); // 关闭弹框
data.edit = false; // 取消编辑
}, 1000);
},
返回 node,data
返回 { node, data, instance, done }
示例 setTimeout可以改成后端api接口
confirmDeleteNode({ node, data, instance, done }) {
setTimeout(() => {
this.$refs.tree.remove(data.id);
instance.confirmButtonLoading = false;
done();
}, 1500);
}
节点被展开时触发的事件
共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
data,node,e
节点被关闭时触发的事件
共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
data,node,e
不请求treeList
示例 setTimeout自行替换接口
@nodeAdd="nodeAdd"
nodeAdd({node, data}) {
this.node = node
}
this.id++;
let t = setTimeout(() => {
this.$refs.tree.append(
{
id: this.id,
label: "append + " + this.id,
},
this.node
);
clearTimeout(t);
t = null;
}, 1000);