intelligent-etmf-system-web/src/views/demo/TreeDemo.vue

<template>
    <div class="tree-demo">
        <h2>自定义树形组件演示</h2>

        <div class="demo-section">
            <h3>功能说明</h3>
            <ul>
                <li>这是一个完全使用原生HTML/CSS/JavaScript实现的树形组件</li>
                <li>不依赖任何第三方UI库</li>
                <li>父节点在子节点被部分选中时显示为半选状态</li>
                <li>即使所有子节点都被选中，父节点也不会自动变为全选状态</li>
            </ul>
        </div>

        <div class="demo-section">
            <h3>演示案例</h3>
            <p>如您所述：选择"成都市"时，其父级"四川省"应该显示为半选状态而不是全选状态</p>

            <div class="tree-container">
                <data-permission-tree :data="treeData" v-model="selectedKeys" />
            </div>

            <div class="result-section">
                <h4>当前选中的节点：</h4>
                <p>{{ selectedKeys }}</p>

                <h4>说明：</h4>
                <ul>
                    <li>尝试选中"成都市"，观察"四川省"的状态</li>
                    <li>"四川省"应该显示为半选状态（方框中有横线）</li>
                    <li>即使您选中"绵阳市"和"德阳市"，"四川省"仍然保持半选状态</li>
                    <li>只有直接点击"四川省"复选框才会使其变为全选状态</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import DataPermissionTree from '@/components/DataPermisionTree/index.vue'
import type { TreeData } from '@/components/DataPermisionTree/types'

// 树形数据
const treeData: TreeData[] = [
    {
        id: 1,
        name: '中国',
        children: [
            {
                id: 2,
                name: '四川省',
                children: [
                    { id: 3, name: '成都市' },
                    { id: 4, name: '绵阳市' },
                    { id: 5, name: '德阳市' }
                ]
            },
            {
                id: 6,
                name: '广东省',
                children: [
                    { id: 7, name: '广州市' },
                    { id: 8, name: '深圳市' },
                    { id: 9, name: '珠海市' }
                ]
            }
        ]
    }
]

// 选中的节点ID
const selectedKeys = ref<number[]>([])
</script>

<style scoped>
.tree-demo {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.demo-section {
    margin-bottom: 30px;
}

.demo-section h3 {
    color: #333;
    margin-bottom: 15px;
}

.demo-section ul {
    padding-left: 20px;
}

.demo-section li {
    margin-bottom: 8px;
    line-height: 1.5;
}

.tree-container {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    min-height: 200px;
}

.result-section {
    margin-top: 20px;
    padding: 15px;
    background-color: #e8f4ff;
    border-radius: 4px;
}

.result-section h4 {
    margin-top: 0;
    color: #333;
}

.result-section p {
    font-family: monospace;
    background-color: #fff;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.result-section ul {
    padding-left: 20px;
    margin: 10px 0;
}

.result-section li {
    margin-bottom: 8px;
    line-height: 1.5;
}
</style>