[vue.js] 树形结点多选框选择

vue.js前端代码：

<template><div><el-tree:data="treeData"node-key="id"show-checkboxref="tree"@check-change="handleCheckChange"/><el-button @click="getSelectedNodes">获取选中的节点</el-button><el-button @click="getSelectedLabels">获取选中的标签</el-button></div>
</template><script>
export default {data() {return {treeData: [{id: 1,label: '一级节点',children: [{ id: 2, label: '二级节点1' },{ id: 3, label: '二级节点2' }]},{id: 4,label: '一级节点',children: [{ id: 5, label: '二级节点1' },{ id: 6, label: '二级节点2' }]}],selectedNodes: [],selectedLabels: []};},methods: {handleCheckChange(node, checked) {console.log('节点:', node, '选中状态:', checked);},getSelectedNodes() {const checkedNodes = this.$refs.tree.getCheckedNodes(false, true); // 只返回完全选中的节点this.selectedNodes = checkedNodes;console.log('选中的节点:', checkedNodes);},getSelectedLabels() {const checkedNodes = this.$refs.tree.getCheckedNodes(false, true);const labels = checkedNodes.map(node => node.label);this.selectedLabels = labels;console.log('选中的标签:', labels);}}
};
</script>

运行的界面：

点击获取选中的节点：

点击“获取选择的标签”：