vue3 el

#vue3 el| 来源: 网络整理| 查看: 265

在 Vue3 的 el-tree 中，可以通过监听 tree 的 check-change 事件来获取复选框选中状态的改变。当某个节点的复选框选中状态发生改变时，会触发 check-change 事件，并传递三个参数: checkedKeys、checkedNodes、checkedLeafKeys。

其中 checkedNodes 可以通过递归获取其所有的祖先节点，即父节点。代码示例:

export default { data() { return { data: [ { id: 1, label: "一级 1", children: [ { id: 4, label: "二级 1-1", children: [ { id: 9, label: "三级 1-1-1", }, { id: 10, label: "三级 1-1-2", }, ], }, { id: 5, label: "二级 1-2", children: [ { id: 11, label: "三级 1-2-1", }, { id: 12, label: "三级 1-2-2", }, ], }, ], }, { id: 2, label: "一级 2", children: [ { id: 6, label: "二级 2-1", children: [ { id: 13, label: "三级 2-1-1", }, { id: 14, label: "三级 2-1-2", }, ], }, { id: 7, label: "二级 2-2", children: [ { id: 15, label: "三级 2-2-1", }, { id: 16, label: "三级 2-2-2", }, ], }, ], }, ], defaultProps: { children: "children", label: "label", }, }; }, methods: { handleCheckChange(checkedKeys, checkedNodes) { const parentNodes = []; for (let i = 0; i < checkedNodes.length; i++) { const node = checkedNodes[i]; while (node.parent) { if (!parentNodes.includes(node.parent)) { parentNodes.push(node.parent); } node = node.parent; } } console.log(parentNodes); }, }, };

在上面的示例中，我们通过获取当前节点的 parent 属性，并递归遍历，将其所有祖先节点推入 parentNodes 数组中。在控制台中打印出 parentNodes 的内容，就可以看到当前选中节点的所有父节点。

【本文地址】

公司简介

联系我们