iView Tree 預設鉤選 - daniel-qa/Vue GitHub Wiki

<template>
    <div class="test-component">
        <Tree :data="treeData" show-checkbox ref="tree"></Tree>
    </div>
</template>

<script>
export default {
    name: 'TestComponent',
    data() {
        return {
            treeData: [
                {
                    title: '國語文',
                    key: 'chinese',
                    expand: true,
                    children: [
                        { title: '第一冊', key: 'chinese-1' },
                        { title: '第二冊', key: 'chinese-2' },
                        { title: '第三冊', key: 'chinese-3' }
                    ]
                },
                {
                    title: '數學',
                    key: 'math',
                    expand: true,
                    children: [
                        { title: '第一冊', key: 'math-1' },
                        { title: '第二冊', key: 'math-2' },
                        { title: '第三冊', key: 'math-3' }
                    ]
                }
            ]
        }
    },
    mounted() {
        // 設定預設勾選項目
        const defaultKeys = ['chinese-1', 'chinese-2'];
        this.setDefaultCheckedNodes(defaultKeys);
    },
    methods: {
        // 設定預設勾選的節點
        setDefaultCheckedNodes(checkedKeys = []) {
            this.$nextTick(() => {
                if (this.$refs.tree) {
                    // 遍歷並設定每個節點為勾選狀態
                    checkedKeys.forEach(key => {
                        const targetNode = this.findNodeByKey(this.treeData, key);
                        if (targetNode) {
                            this.$set(targetNode, 'checked', true);
                        }
                    });
                }
            });
        },
        
        // 遞迴查找指定 key 的節點
        findNodeByKey(nodes, key) {
            for (let node of nodes) {
                if (node.key === key) {
                    return node;
                }
                if (node.children && node.children.length > 0) {
                    const found = this.findNodeByKey(node.children, key);
                    if (found) {
                        return found;
                    }
                }
            }
            return null;
        }
    }
}
</script>

<style scoped>
.test-component {
    padding: 20px;
}
</style>