element-tree相关经验汇总
前言：这个el-tree是前段时间做项目时候写的，一直没时间进行整理，最近那个项目的tree数据超级大，导致浏览器卡死，需要进行处理，正好，趁着这次，把相关的配置也给整理一下(*^▽^*)
大概呢就张这个样子：有查询、增加、删除、修改、上移、下移几个功能
那就先写一下相关配置吧：
我这个树上用到的属性（好像有些没用，下次再写可以精简一下了~）如图：
相关属性配置如下：
show-checkbox ： 节点是否可以被选择
check-strictly ： 子节点是否与父节点相互关联（就是选中子节点的时候，父节点是否也显示被选中）
check-on-click-node ： 默认是false，点击复选框时才会选中节点。（为false，就是点击当前节点，不会选中）
node-key ： 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
accordion ： 是否每次只能打开同一个层级
indent ： 相邻级节点间的水平缩进，单位为像素
lazy ： 是否懒加载子节点，需与 load 方法结合使用
load ： 加载子树数据的方法，仅当 lazy 属性为true 时生效
filter-node-method ：对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏（个人理解：就是控制树结构数据节点的节点的显示隐藏，需要配合watch使用达到模糊查询树结构的效果）
示例： :filter-node-method="filterNode"
//methods方法
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
}
//watch监听 监听tree的过滤器 通过vue的双向绑定 v-model 绑定filterText到input上面去。通过触发change事件就可以进行实现模糊查询了
watch: {
filterText(val) {
this.$refs.treeForm_mx.filter(val);
},
},
-------------------------------------------------------------分割线-------------------------------------------------------------------------
node-click ： 节点被点击时的回调 共有三个参数，分别是：1.该节点所对应的对象 2.节点对应的 Node 3.节点组件本身
check-change ： 节点选中状态发生变化时的回调 共有三个参数，分别是： 1.节点所对应的对象 2.节点本身是否被选中 3.节点的子树中是否有被选中的节点
check : 当复选框被点击的时候触发
default-expanded-keys ： 默认展开的节点的 key 的数组
default-checked-keys ： 默认勾选的节点的 key 的数组
tree新增功能的实现：（功能描述：在当前选中节点下添加一子节点）
效果图：弹出弹框，点击确认，在当前选中节点下添加一子节点，然后将整体的tree数据发送给接口
代码如下：
let data = this.selectData; //this.selectData === 节点所对应的对象， 我是在 @check="selectTree"事件中进行赋值的（点击复选框时触发）
selectTree(node, list) {
const node2 = this.$refs.treeForm_mx.getNode(node.id);
if (this.selectData.id != node.id) {
this.selectData = node;
this.selectNode = node2;
} else {
this.selectData = {};
this.selectNode = {};
}
let id = this.newID; //newID：查询时候获取最后一个id，存放，新增的时候讲这个newID++，作为新节点的ID
let value = this.addValue; //模型名称
const newChild = { id: id++, label: value, children: [], }; if (!data.children) { // this.$set(this.datas, "children", []); } data.children.push(newChild);
this.baocun();//将整体tree数据发送接口
tree编辑功能（功能描述：修改节点名称）
效果图：
let data = this.selectData; //this.selectData和this.selectNode与新增一样都是在 @check="selectTree"事件中进行赋值的（点击复选框时触发） let node = this.selectNode; const parent = node.parent; const children = parent.data.children || parent.data; const index = children.findIndex((d) => d.id === data.id); let value = this.updaValue; children[index].label = value; this.showMB = false; //关闭弹框 this.baocun();//将整体tree数据发送接口
tree删除功能（功能描述：删除该节点）
let data = this.selectData; let node = this.selectNode; const parent = node.parent; const children = parent.data.children || parent.data; const index = children.findIndex((d) => d.id === data.id); children.splice(index, 1); this.showMB3 = false; this.selectData = {}; this.selectNode = {}; this.baocun();
tree上移功能（功能描述：同级进行上移）
let data = this.selectData; let node = this.selectNode; const parent = node.parent; const children = parent.data.children || parent.data; const index = children.findIndex((d) => d.id === data.id); if (index > 0) { const tempChildrenNodex1 = children[index - 1]; const tempChildrenNodex2 = children[index]; this.$set(children, index - 1, tempChildrenNodex2); this.$set(children, index, tempChildrenNodex1); this.defaultExpand[0] = data.id; this.tree_key++; this.baocun(); } else { this.$notify({ title: "上移节点", message: "已处于最顶部", offset: 60, type: "error", }); } }
tree下移功能（功能描述：同级进行下移）
let data = this.selectData; let node = this.selectNode; const parent = node.parent; const children = parent.data.children || parent.data; const index = children.findIndex((d) => d.id === data.id); if (index < children.length - 1) { const tempChildrenNodex1 = children[index + 1]; const tempChildrenNodex2 = children[index]; this.$set(children, index + 1, tempChildrenNodex2); this.$set(children, index, tempChildrenNodex1); this.$set(this.datas); this.defaultExpand[0] = data.id; this.tree_key++; this.baocun(); } else { this.$notify({ title: "下移节点", message: "已处于最底部", offset: 60, type: "error", }); } }
