以下树为带parentId结构,不带的不适用。
1、保存选中节点的数据
首先介绍一下el-tree
html
<el-tree
:data="treeData"
show-checkbox
node-key="id"
:props="defaultProps"
ref="tree"
@check-change="getSelectedNodes"
style="background-color: rgba(0, 0, 0, 0)"
>
:props里面存数据的对应结构
javascript
function getSelectedNodes() {
data.selectedNodes = data.tree.getCheckedNodes();
console.log('选中的节点数据', data.selectedNodes);
}j
2、保存选中节点的叶子节点数据
javascript
function getSelectedNodes() {
data.selectedNodes = data.tree.getCheckedNodes();
const Nodes = data.tree.getCheckedNodes();
let array = [];
let isLeaf = false;
data.selectedNodes.map((item) => {
Nodes.map((i) => {
if (item.id === i.parentId) {
isLeaf = true;
}
});
if (isLeaf === true) {
array.push(item);
isLeaf = false;
}
});
data.selectedTopNodes = array;
console.log('叶子节点数据', data.selectedTopNodes);
}
3、保存选中节点的最顶层节点数据
javascript
function getSelectedNodes() {
data.selectedNodes = data.tree.getCheckedNodes();
const Nodes = data.tree.getCheckedNodes();
let array = [];
let isLeaf = false;
let enableContain = false;
data.selectedNodes.map((item) => {
Nodes.map((i) => {
if (item.id === i.parentId) {
isLeaf = true;
enableContain = true;
}
});
if (isLeaf === true) {
array.push(item);
isLeaf = false;
}
if (enableContain === false) {
array.push(item);
}
});
data.selectedTopNodes = array;
console.log('最顶层节点数据', data.selectedTopNodes);
}
需要更多请关注并评论区留言,会继续补充