# 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);
```