vue-el-tree-custom v0.3.4

vue-el-tree-custom

安装

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

更新历史

0.3.4

1.增加获取当前节点的所有上级的父级的node-key集合的方法getNodeParent 参数data

0.3.0版本

1.优化取消编辑的input显示问题
2.增加点击按钮选中node

0.2.9版本

1.样式提取
2.按钮显示修改，按层级显示，详见下

0.2.8版本

1.confirmEditNode 修改删除 增加加载loading 自行调用done 方法关闭

0.2.4版本

1.修复nodeKey为0时出现的bug
2.增加节点展开记录功能,更新treeList保持节点打开状态

css

增加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;

属性

expandLevel

展开层级  默认 1  展开父节点  2  展开 父节点以及子节点
类型数值

isJustifyContent

修改 新增 删除 是否两边对齐
默认 true

iconClass

自定义树节点的图标

isInput

模糊搜索框 默认 true
false 不显示
true 显示

isBorder

外边框显示 默认 true
false 不显示
true 显示

treeList

tree 数据 默认可能会有测试数据（会忘记）
可自行源码删除

searchLabel

搜索字段 默认 label

placeholder

默认 请输入关键字

containerHeight

默认 500

containerWidth

默认 "100%"

renderAfterExpand

是否在第一次展开某个树节点后才渲染其子节点
默认 true

expandOnClickNode

是否在点击节点的时候展开或者收缩节点
默认值为 false
如果为 false，则只有点箭头图标的时候才会展开或者收缩节点

showCheckBox

默认 false 不显示

checkStrictly

在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false

accordion

是否每次只打开一个同级树节点展开

nodeKey

每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
默认 id

defaultProps

默认 {
      children: "children",
      label: "label",
      }
label	指定节点标签为节点对象的某个属性值	string, function(data, node)
children	指定子树为节点对象的某个属性值  string

按钮控制 customNodeAction

[true,true,true] 控制按钮显示 默认[false,false,false]
可填写数字 注意 0 表示全部层级显示  1 表示 1 和 1 以上层级显示 以此类推
示例 [0, false, 3]  [1, 2, 3]  [true, true, true]   [true, false, true]

是否行内编辑--isEdit

默认true 开启 false 关闭
false  发送事件 editNode
true   确定--confirmEditNode  取消--cancelEditNode

方法

getNodeParent

获取当前节点的所有上级的父级的node-key集合的方法getNodeParent 参数data
示例：this.$refs.tree.getNodeParent({
               id: 31,
               label: "31",
      })

getTreeMapData

获取tree的nodesMap
参数可选 nodeKey
不传获取完整 nodesMap  传 参数（node-key） 获取对应的nodes

append

追加--append 同element中tree的append
 为 Tree 中的一个节点追加一个子节点
(data, parentNode) 接收两个参数，1. 要追加的子节点的 data 2. 子节点的 parent 的 data、key 或者 node
parentNode 为 nul 不传 直接顶层追加

remove

删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性
传入参数则删除指定node  不传参数删除自身node

示例： this.$refs[name].remove()
根据自身调用需要删除节点
value=要删除的节点的 data 或者 node
this.$refs[name].remove(value)

setCurrentKey

通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性
(key) 待被选节点的 key，若为 null 则取消当前高亮的节点

同element-ui el-tree

getCheckedNodes , getCheckedKeys , getCurrentKey , getCurrentNode , getNode, getHalfCheckedNodes, getHalfCheckedKeys
setCurrentNode, setCurrentKey

事件

nodeClick

node点击事件
返回 data, node, event

确定编辑 confirmEditNode

返回 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);
    },

取消编辑 cancelEditNode

返回 node,data

删除--confirmDeleteNode

返回  { node, data, instance, done }
示例 setTimeout可以改成后端api接口
  confirmDeleteNode({ node, data, instance, done }) {
    setTimeout(() => {
      this.$refs.tree.remove(data.id);
      instance.confirmButtonLoading = false;
      done();
    }, 1500);
  }

nodeExpand

节点被展开时触发的事件
共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
data,node,e

nodeCollapse

节点被关闭时触发的事件
共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
data,node,e

nodeAdd

不请求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);