66 lines
1.2 KiB
Vue
66 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-row :gutter="20">
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-tree style="max-width: 600px" :data="typeTree" :props="{ children: 'children', label: 'label' }" @node-click="handleNodeClick" />
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="18"></el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { ref, reactive } from 'vue';
|
||
|
|
|
||
|
|
/* --------------- data --------------- */
|
||
|
|
// #region
|
||
|
|
|
||
|
|
let typeTree = reactive([
|
||
|
|
{
|
||
|
|
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',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
// #endregion
|
||
|
|
|
||
|
|
/* --------------- methods --------------- */
|
||
|
|
const handleNodeClick = (data) => {
|
||
|
|
console.log(data);
|
||
|
|
};
|
||
|
|
// #region
|
||
|
|
|
||
|
|
// #endregion
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped></style>
|