如图
<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>