forked from opentiny/tiny-vue
92 lines
2.1 KiB
Vue
92 lines
2.1 KiB
Vue
<template>
|
||
<div>
|
||
<div class="option-row">
|
||
<span> 连接线：</span>
|
||
<tiny-radio-group v-model="showLine">
|
||
<tiny-radio label="show">显示</tiny-radio>
|
||
<tiny-radio label="hide">不显示</tiny-radio>
|
||
</tiny-radio-group>
|
||
</div>
|
||
<div class="option-row">
|
||
<span> 组件大小：</span>
|
||
<tiny-radio-group v-model="size">
|
||
<tiny-radio label="small">迷你尺寸</tiny-radio>
|
||
<tiny-radio label="medium">正常尺寸</tiny-radio>
|
||
</tiny-radio-group>
|
||
</div>
|
||
<div class="option-row">
|
||
<span> 层级水平缩进：</span>
|
||
<tiny-radio-group v-model="indent">
|
||
<tiny-radio :label="18">18px</tiny-radio>
|
||
<tiny-radio :label="28">28px</tiny-radio>
|
||
<tiny-radio :label="38">38px</tiny-radio>
|
||
</tiny-radio-group>
|
||
</div>
|
||
|
||
<tiny-tree
|
||
:data="data"
|
||
:size="size"
|
||
:indent="indent"
|
||
:show-line="showLine === 'show'"
|
||
default-expand-all
|
||
@node-click="nodeClick"
|
||
></tiny-tree>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="jsx">
|
||
import { Tree, RadioGroup, Radio } from '@opentiny/vue'
|
||
|
||
export default {
|
||
components: {
|
||
TinyTree: Tree,
|
||
TinyRadio: Radio,
|
||
TinyRadioGroup: RadioGroup
|
||
},
|
||
data() {
|
||
return {
|
||
showLine: 'hide',
|
||
size: 'medium',
|
||
indent: 18,
|
||
data: [
|
||
{
|
||
id: '1',
|
||
label: '数据 1',
|
||
children: [{ id: '1-1', label: '数据 1-1', children: [{ id: '1-1-1', label: '数据 1-1-1' }] }]
|
||
},
|
||
{
|
||
id: '2',
|
||
label: '数据 2',
|
||
children: [
|
||
{ id: '2-1', label: '数据 2-1' },
|
||
{ id: '2-2', label: '数据 2-2' }
|
||
]
|
||
},
|
||
{
|
||
id: '3',
|
||
label: '数据 3',
|
||
children: [{ id: '3-1', label: '数据 3-1' }]
|
||
}
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
nodeClick(data, node, vm) {
|
||
console.log('点击节点事件：', { data, node, vm })
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.option-row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 16px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.option-row > span {
|
||
font-size: 18px;
|
||
}
|
||
</style>
|