2025-05-08 08:23:03 +00:00
|
|
|
<template>
|
|
|
|
|
<el-tree
|
|
|
|
|
style="max-width: 600px"
|
|
|
|
|
:data="data"
|
|
|
|
|
:props="defaultProps"
|
|
|
|
|
@node-click="handleNodeClick"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
defineOptions({ name: 'FolderTree' })
|
2025-05-09 06:42:51 +00:00
|
|
|
const props = defineProps({
|
|
|
|
|
data: {
|
|
|
|
|
type: Array,
|
|
|
|
|
default: () => [],
|
|
|
|
|
},
|
|
|
|
|
})
|
2025-05-08 08:23:03 +00:00
|
|
|
interface Tree {
|
2025-05-09 06:42:51 +00:00
|
|
|
name: string
|
2025-05-08 08:23:03 +00:00
|
|
|
children?: Tree[]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const handleNodeClick = (data: Tree) => {
|
|
|
|
|
console.log(data)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const defaultProps = {
|
|
|
|
|
children: 'children',
|
2025-05-09 06:42:51 +00:00
|
|
|
label: 'name',
|
2025-05-08 08:23:03 +00:00
|
|
|
}
|
|
|
|
|
</script>
|