VUE3+el-tree的使用

如图

<template>
    <div id="barbox">
    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
</div>
</template>
  
<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import { NavbarList } from "../http/api";

interface Tree {
    label: string;
    children?: Tree[];
}

const datalist = ref({
    isMobile: true,
    lang: "",
    oData: {
        id: "",
        code: "",
        company_id: "1755649432567877",
    },
});

const handleNodeClick = (data: Tree) => {
    console.log('2', data)
}

const lablelist = ref<Tree[]>([]); // 改为响应式数组
const data = ref<Tree[]>([]); // 改为响应式数组

const btn = async () => {
    try {
        const res = await NavbarList(datalist.value);
        if (res.status) {
            console.info("获取列表数据", res.data); //获取列表数据
            // 清空数组
            lablelist.value = [];
            res.data.data.forEach((m) => {
                //   把数据推给data的lable
                lablelist.value.push({
                    label: m.label,
                    children: m.children,
                });
            });
            console.info("lablelist.value", lablelist.value);

            // 将 lablelist.value 复制给 data
            data.value = [...lablelist.value];

            console.info("data2", data.value);
        }
    } catch (error) {
        console.error("发生错误", error);
    }
};

onMounted(() => {
    btn();
});

const defaultProps = {
    children: "children",
    label: "label",
};

// 使用 watch 监听 data 的变化
watch(data, (newValue) => {
    console.info("hh", newValue);
});
</script>
  
<style scoped>

#barbox{
    width: 300px;
}
</style>