在使用 Element Plus 的?el-tree?組件時，如果后端返回的節點?key?數組中包含了部分選中的父級節點的?key，可能會導致該父級節點下的所有子節點也被默認選中。這是因為?el-tree?的默認行為是：如果一個父節點被選中，那么其所有子節點也會被選中。

為了解決這個問題，你需要在設置默認選中項時，手動檢查每個節點的狀態，確保只有指定的節點被選中，而其父節點和未指定的子節點不會被錯誤地選中。

以下是詳細的解決方案和代碼示例：

解決方案步驟

1. 獲取樹形控件的引用：通過?ref?獲取?el-tree?實例，以便調用其方法。
2. 處理后端返回的?key?數組：遍歷?key?數組，逐個設置節點的選中狀態。
3. 手動設置節點的選中狀態：使用?setChecked?方法為每個節點單獨設置選中狀態，而不是依賴?default-checked-keys?屬性。這可以避免父節點被自動選中導致子節點全部選中的問題。
4. 確保數據加載完成后再設置選中狀態：如果樹形控件的數據是異步加載的，確保在數據加載完成后再進行選中狀態的設置。

詳細代碼示例

<template><div><!-- 樹形控件 --><el-treeref="tree":data="treeData":props="defaultProps"node-key="id"show-checkboxdefault-expand-all@check="onCheckChange"></el-tree><!-- 按鈕觸發設置默認選中 --><button @click="setDefaultCheckedKeys">設置默認選中</button></div>
</template><script>
import { defineComponent, ref, onMounted } from 'vue';
import { ElTree, ElMessage } from 'element-plus';export default defineComponent({components: {ElTree},setup() {// 樹形控件的引用const tree = ref(null);// 樹形控件的數據（假設從后端獲取）const treeData = ref([{id: 1,label: '一級 1',children: [{ id: 4, label: '二級 1-1', children: [{ id: 9, label: '三級 1-1-1' }] },{ id: 5, label: '二級 1-2' }]},{id: 2,label: '一級 2',children: [{ id: 6, label: '二級 2-1' }]},{ id: 3, label: '一級 3', children: [] }]);// 樹形控件的配置const defaultProps = {children: 'children',label: 'label'};// 后端返回的節點 key 數組（包含部分選中的父級節點）const backendCheckedKeys = [1, 4, 6]; // 例如：選中了一級 1、二級 1-1 和二級 2-1// 存儲最終需要選中的節點 keyconst finalCheckedKeys = ref([]);// 監聽樹形控件的選中變化（可選，用于調試或進一步處理）const onCheckChange = (checkedKeys, checkedNodes, halfCheckedKeys, halfCheckedNodes) => {console.log('選中的 keys:', checkedKeys);console.log('半選中的 keys:', halfCheckedKeys);};// 設置默認選中項的方法const setDefaultCheckedKeys = () => {if (!tree.value) {ElMessage.error('樹形控件未加載完成');return;}// 清空之前的選中狀態tree.value.setCheckedKeys([]);// 遍歷后端返回的 key 數組，逐個設置選中狀態backendCheckedKeys.forEach(key => {const node = tree.value.getNode(key);if (node) {// 僅選中當前節點，不影響父節點和子節點node.setChecked(true, false); // 第二個參數為 false，表示不改變子節點的選中狀態finalCheckedKeys.value.push(key); // 記錄最終選中的 keyElMessage.success(`節點 ${node.label} 已選中`);} else {ElMessage.error(`未找到 key 為 ${key} 的節點`);}});};// 確保在樹形控件數據加載完成后再設置選中狀態onMounted(() => {// 如果數據是異步加載的，可以在這里調用 setDefaultCheckedKeys// 例如，通過 API 請求獲取數據后調用setDefaultCheckedKeys();});return {tree,treeData,defaultProps,setDefaultCheckedKeys,onCheckChange,finalCheckedKeys};}
});
</script>

代碼解析

1. 模板部分 (<template>)：

   • el-tree?組件設置了?ref="tree"，用于后續獲取樹形控件的實例。
   • node-key="id"?指定了每個節點的唯一標識符為?id。
   • show-checkbox?顯示復選框。
   • default-expand-all?默認展開所有節點。
   • 一個按鈕用于觸發設置默認選中項的操作。

2. 腳本部分 (<script>)：

   • 數據定義：
     • treeData：樹形控件的數據結構，通常從后端獲取。這里為了示例，直接在前端定義。
     • defaultProps：配置樹形控件的屬性映射。
     • backendCheckedKeys：模擬后端返回的需要默認選中的節點?key?數組。注意，這個數組中包含了父級節點的?key（如?1），但只希望部分子節點被選中。
   • 方法定義：
     • setDefaultCheckedKeys：主要方法，用于根據?backendCheckedKeys?設置默認選中項。它通過遍歷?backendCheckedKeys，使用?getNode?方法獲取對應的節點對象，然后調用?setChecked(true, false)?來僅選中當前節點，而不改變其子節點的選中狀態。這樣可以避免父節點被選中導致所有子節點被選中的問題。
     • onCheckChange：可選的監聽器，用于監聽樹形控件的選中狀態變化，便于調試或進一步處理。
   • 生命周期鉤子：
     • onMounted：確保在組件掛載后調用?setDefaultCheckedKeys，特別是在數據是異步加載的情況下。
   • 響應式變量：
     • finalCheckedKeys：用于記錄最終被選中的節點?key，可以在其他地方使用或展示。

3. 關鍵邏輯：

   • 避免父節點被自動選中：通過調用?node.setChecked(true, false)，僅將當前節點設置為選中狀態，而不影響其子節點。這意味著即使某個父節點在?backendCheckedKeys?中，也只會選中該節點本身，而不會遞歸選中其所有子節點。
   • 清空之前的選中狀態：在設置新的默認選中項之前，先調用?tree.value.setCheckedKeys([])?清空所有選中狀態，確保不會有殘留的選中項影響結果。
   • 錯誤處理：如果某個?key?沒有對應的節點，會通過?ElMessage.error?提示用戶。

運行效果

當點擊“設置默認選中”按鈕時，樹形控件會根據?backendCheckedKeys?數組中的?key?設置相應的節點為選中狀態。由于使用了?setChecked(true, false)，只有指定的節點會被選中，而其父節點和未指定的子節點不會被錯誤地選中。例如：

• 如果?backendCheckedKeys?包含?1（一級 1）、4（二級 1-1）和?6（二級 2-1）：
  • 一級 1 會被選中，但其子節點（如二級 1-2）不會被選中。
  • 二級 1-1 會被選中，且其子節點（如三級 1-1-1）不會被選中。
  • 二級 2-1 會被選中。

注意事項

1. 確保?node-key?唯一：node-key?屬性指定的字段值必須在樹形控件中是唯一的，否則可能導致意外的行為。
2. 異步數據加載：如果樹形控件的數據是通過異步請求獲取的，確保在數據加載完成后再調用?setDefaultCheckedKeys。可以通過監聽數據加載完成的事件或使用?this.$nextTick?來實現。
3. 性能優化：對于非常大的樹形控件，頻繁調用?getNode?和?setChecked?可能會影響性能。可以考慮優化數據結構或減少不必要的操作。
4. 用戶體驗：在實際應用中，可能需要更復雜的邏輯來處理用戶的交互，例如允許用戶手動選擇或取消選擇某些節點，同時保持默認選中的邏輯。根據具體需求進行調整。

通過以上方法，你可以精確地控制樹形控件中哪些節點被默認選中，避免因父節點被選中而導致所有子節點被錯誤地選中的問題。