jimmy
078e59ae6b
A: 实现树状结构示例并添加点击事件处理逻辑 A: 新增 `pnpm-lock.yaml` 文件，记录依赖版本及锁定信息 U: 更新 HomeView，布局中集成 Element Plus 的 `Tree` 组件与响应式布局
105 lines
1.8 KiB
Vue
105 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import TheWelcome from '../components/TheWelcome.vue'
|
|
interface Tree {
|
|
label: string
|
|
children?: Tree[]
|
|
}
|
|
|
|
const handleNodeClick = (data: Tree) => {
|
|
console.log(data)
|
|
}
|
|
|
|
const data: Tree[] = [
|
|
{
|
|
label: 'Level one 1',
|
|
children: [
|
|
{
|
|
label: 'Level two 1-1',
|
|
children: [
|
|
{
|
|
label: 'Level three 1-1-1',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: 'Level one 2',
|
|
children: [
|
|
{
|
|
label: 'Level two 2-1',
|
|
children: [
|
|
{
|
|
label: 'Level three 2-1-1',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: 'Level two 2-2',
|
|
children: [
|
|
{
|
|
label: 'Level three 2-2-1',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: 'Level one 3',
|
|
children: [
|
|
{
|
|
label: 'Level two 3-1',
|
|
children: [
|
|
{
|
|
label: 'Level three 3-1-1',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: 'Level two 3-2',
|
|
children: [
|
|
{
|
|
label: 'Level three 3-2-1',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
]
|
|
|
|
const defaultProps = {
|
|
children: 'children',
|
|
label: 'label',
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full h-full flex flex-col ">
|
|
<el-row class="h-100">
|
|
<el-col :span="10">
|
|
<el-tree
|
|
style="max-width: 600px"
|
|
:data="data"
|
|
:props="defaultProps"
|
|
@node-click="handleNodeClick"
|
|
/> </el-col>
|
|
<el-col :span="14">
|
|
<div class="grid-content h-full bg-green" />
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<div class="grid-content bg-blue" />
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.grid-content {
|
|
border-radius: 4px;
|
|
min-height: 36px;
|
|
}
|
|
</style>
|