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>
運行的界面:
點擊獲取選中的節點:
點擊“獲取選擇的標簽”: