el-tree改造了下
可選可取消 有默認(rèn)值 不包含父級id 默認(rèn)展開 點(diǎn)擊節(jié)點(diǎn)也可觸發(fā)選擇 節(jié)點(diǎn)內(nèi)容自定義

<template>{{ childKeys }}<!--default-checked-keys:默認(rèn)展開值（正常來說需要包含父級id的 但是我們后端不要后端id ）show-checkbox：多選框node-key：每個(gè)樹節(jié)點(diǎn)用來作為唯一標(biāo)識的屬性，整棵樹應(yīng)該是唯一的default-expand-all：是否默認(rèn)展開所有節(jié)點(diǎn)expand-on-click-node：是否在點(diǎn)擊節(jié)點(diǎn)的時(shí)候展開或者收縮節(jié)點(diǎn)， 默認(rèn)值為 true，如果為 false，則只有點(diǎn)箭頭圖標(biāo)的時(shí)候才會(huì)展開或者收縮節(jié)點(diǎn)default-checked-keys：默認(rèn)勾選的節(jié)點(diǎn)的 key 的數(shù)組check-on-click-node：是否在點(diǎn)擊節(jié)點(diǎn)的時(shí)候選中節(jié)點(diǎn)，默認(rèn)值為 false，即只有在點(diǎn)擊復(fù)選框時(shí)才會(huì)選中節(jié)點(diǎn)props：配置選項(xiàng)，具體看下表--><el-tree ref="treeRef" style="max-width: 600px" :data="data" show-checkbox node-key="id" :default-expand-all="true":expand-on-click-node='false' :default-checked-keys="childKeys" :check-on-click-node="true" :props="defaultProps"@check-change="checkChange"><template #default="{ node, data }"><span class="custom-tree-node"><span>{{ node.label }}</span><span style="color:red;margin-left: 10px">id:{{data.id }}</span></span></template></el-tree>
</template><script setup>
import { ref } from 'vue';let treeRef = ref(null);
let childKeys = ref([5, 10]); // 初始化選中子節(jié)點(diǎn)的 ID
const defaultProps = {children: 'children',label: 'label',
};const data = [{id: 1,label: 'Level one 1',children: [{id: 4,label: 'Level two 1-1',children: [{id: 9,label: 'Level three 1-1-1',},{id: 10,label: 'Level three 1-1-2',},],},],},{id: 2,label: 'Level one 2',children: [{id: 5,label: 'Level two 2-1',},{id: 6,label: 'Level two 2-2',},],},{id: 3,label: 'Level one 3',children: [{id: 7,label: 'Level two 3-1',},{id: 8,label: 'Level two 3-2',},],},
];const checkChange = () => {// 獲取所有選中的節(jié)點(diǎn)對象const checkedNodes = treeRef.value.getCheckedNodes();// 結(jié)果1:獲取包含父節(jié)點(diǎn)的idchildKeys.value = treeRef.value.getCheckedKeys()// 結(jié)果2：提取子節(jié)點(diǎn)的 ID，不包括父節(jié)點(diǎn)childKeys.value = checkedNodes.filter(node => !node.children) // 只保留沒有子節(jié)點(diǎn)的節(jié)點(diǎn).map(node => node.id); // 提取 IDconsole.log('默認(rèn)值', childKeys.value, checkedNodes); // 只包含子節(jié)點(diǎn)的 ID
}
</script>