前言：这个el-tree是前段时间做项目时候写的，一直没时间进行整理，最近那个项目的tree数据超级大，导致浏览器卡死，需要进行处理，正好，趁着这次，把相关的配置也给整理一下(*^▽^*)
大概呢就张这个样子：有查询、增加、删除、修改、上移、下移几个功能
那就先写一下相关配置吧：
我这个树上用到的属性（好像有些没用，下次再写可以精简一下了~）如图：
相关属性配置如下：
show-checkbox ： 节点是否可以被选择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 的数组
check-strictly ： 子节点是否与父节点相互关联（就是选中子节点的时候，父节点是否也显示被选中）
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",
});
}
}
标签：node,const,tree,汇总,节点,id,element,data,children From： https://www.cnblogs.com/a973692898/p/17489147.html