hsq-pro/src/views/vent/home/workPlaceWarn/components/basicTree.vue

<template>
    <div class="basicTree">
        <a-tree :tree-data="treeDatas" show-icon default-expand-all v-model:selectedKeys="selectedKeys"
            v-model:expandedKeys="expandedKeys">
            <template #switcherIcon>
                <CaretDownOutlined />
            </template>

        </a-tree>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, defineProps, watch } from 'vue'
import { CaretDownOutlined, } from '@ant-design/icons-vue';

let props = defineProps({
    treeData: {
        type: Array,
        default: () => {
            return []
        }
    }
})

let treeDatas = ref([])//树节点数据
//默认选中节点
let selectedKeys = ref(['0-0-0'])
//默认展开节点
const expandedKeys = ref<string[]>(['1']);

//递归遍历菜单数据
function getMenuTree(menuList, pid) {
    let treeList = [];
    for (let i = 0; i < menuList.length; i++) {
        let menu = menuList[i];
        if (menu.pid === pid) {
            let tree = {
                key: menu.id,
                title: menu.name,
                children: getMenuTree(menuList, menu.id)
            };
            tree.children.length === 0 && delete tree.children;
            treeList.push(tree);
        }
    }
    return treeList;
}

watch(() => props.treeData, (newV, oldV) => {
    treeDatas.value.length = 0
    treeDatas.value = getMenuTree(newV, null)
    console.log(treeDatas.value, '树节点数据------')

}, { immediate: true, deep: true })








</script>

<style lang="less" scoped>
.basicTree {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 15px 10px;
    box-sizing: border-box;
}

:deep(.zxm-tree) {
    color: #fff;
    background-color: transparent;
    letter-spacing: 1px;
}

:deep(.zxm-tree .zxm-tree-node-content-wrapper.zxm-tree-node-selected) {
    background-color: transparent;
    color: #02bbe9;
}

:deep(.zxm-tree .zxm-tree-node-content-wrapper:hover) {
    background-color: transparent;
    color: #02bbe9;
}</style>