1.需求
这样的树
又或者带选择框的树
2.代码实现
因为这个树不仅是展示上面的节点。我还需要对它进行一些需求操作
这就意味着,我不能通过调用接口来刷新这颗树。否则,你想再定位到之前你点的那个节点就找不到了。因为你之前点的那个节点,在刷新之后就没记录了。比如,对树上的节点进行添加,根据里面唯一值来判断的就会发生改变。第二个为了性能的角度考虑,发送请求过多也不好。所以,下面这篇进行手动添加、删除、定位节点。
template中:
<el-input
placeholder="输入关键字进行过滤"
class="filterTree"
v-model="filterText"
>
</el-input>
<el-tree
:data="data" // 渲染数据 ,数组里面放对象 [{id: 1},{id: 2}]
node-key="id" // 重点。唯一值。取上面data数据中的唯一的值
ref="menuTree"
:expand-on-click-node="true" // 是否在点击节点的时候展开或者收缩节点, 默认值为 true,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点。
highlight-current // 点击的节点高亮显示
default-expand-all // 默认展开全部节点
draggable // 可拖拽
@node-click="nodeClick" // 节点点击事件
:default-expanded-keys="expandedKeys"
:current-node-keys="id"
:style="{height: treeHeight + 'px'}"
:filter-node-method="filterOrgTree"
:getCurrentNode="getCurrentNode"
>
<span class="custom-tree-node" slot-scope="{ node, data }" style="width: 100%;" :id="node.matClassCode">
<span style="display:block;float:left;">{{ node.label }}</span>
<span style="display:block;float:right;margin-right: 12px;">
<!-- <el-button
type="text"
size="mini"
@click="() => append(data)">
Append
</el-button> -->
<!-- <el-button
type="text"
size="mini"
class="el-icon-delete"
@click="() => remove(node, data)">
</el-button> -->
<el-button
type="text"
size="mini"
class="el-icon-delete"
@click="() => deleteCpnDetail(data)">
</el-button>
</span>
<!-- <el-dropdown>
<span class="el-dropdown-link">
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item disabled>双皮奶</el-dropdown-item>
<el-dropdown-item divided>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown> -->
</span>
</el-tree>
data中
data () {
return {
nodeRow: {},
filterText: ''
}
}
computed中
computed: {
treeHeight: function () {
return window.innerHeight - 110 // 自动计算树的高度,自适应电脑屏幕
}
},
methods中
methods: {
// 点击树事件
nodeClick (item, el) {
let _this = this;
_this.nodeRow = item
},
filterText (val) {
this.$refs.menuTree.filter(val);
}
介绍两个方法:添加子节点,和添加同级节点
自己写的:
// 追加树子节点方法
// data当前节点数组。是个数组,当前节点数组。哪个方法调用就改下相应的即可。
// parentNode父节点对象。对象对象,父节点对象
append (data, parentNode) {
// 赋值,把当前节点对象添加到父节点对象
this.$refs['menuTree'].getCurrentNode(parentNode.id).children = data
this.$nextTick(() => {
// 高亮父节点
this.$refs['menuTree'].setCurrentKey(parentNode.id);
// 点击父节点,定位到父节点
this.nodeClick(parentNode)
})
},
// 追加树同级节点方法
// data当前节点数组。数组数组数组。是个数组,当前节点的数组,数组里面包含对象
insertAfter (data) {
// this.data是树形结构渲染的数组
// 传过来的data是个数组, 相当于在
this.data.push(data)
this.$nextTick(() => {
// 高亮当前节点
this.$refs['menuTree'].setCurrentKey(data.id);
// 点击当前节点。
this.nodeClick(data)
})
},
------------------------------我是一条分割线--------------------------------
自己写的方法有点麻烦。elementui提供了两个添加子节点和添加同级节点的方法超级简单,一句代码就可乐,不过要记得注意传参
假如我有个新增方法
add () {
// 1.数组逐条添加到某个节点,添加多条子节点
// 在某个节点添加子节点
// this.data.children为需要添加的数组
this.needList.children.forEach(item => {
// item对象对象对象。
// _this.nodeRow点击的那条数据,也是个对象对象
_this.$refs['menuTree'].append(item, _this.nodeRow);
})
// 2.添加多条子节点
// _this.nodeRow点击的父元素
_this.$refs['menuTree'].append(需要添加的对象, _this.nodeRow);
// 3.添加同级的节点
_this.$refs['menuTree'].insertAfter(需要添加的对象, 需要添加到谁前面的对象);
具体的看element官网
}
}
删除操作:
deleteCpnDetail (parent) {
this.data.splice(index, 1);
这个要看具体删除哪个节点下面的数据
1.比如我要删掉我点击的那个节点的数据, 点击数
parent.splice(index, 1);
2.比如我是点击父节点,在表格中删除某个子节点,先循环父节点数组,找到需要删除的是哪个节点的id,然后再删掉,最后高亮父节点
const index = parent.children.findIndex(d => d.id === data.id);
parent.children.splice(index, 1);
_this.$refs['menuTree'].setCurrentKey(parent.id);
_this.nodeClick(parent)
}
删除1.点树形结构删除的示意图
删除2,通过点父节点显示表格再删除某条的示意图
还有三个添加、删除的方法(官网)用法上面介绍了
总结到此