1+ <template >
2+ <div class =" container"
3+ <!-- 单选 -->
4+ <div class =" panel"
5+ <div class =" header" div >
6+ <div class =" body"
7+ <div style =" height 300px "
8+ <VTree
9+ v-model =" selectableValue"
10+ :data =" selectable"
11+ @update:modelValue =" () => {}"
12+ selectable
13+ ></VTree >
14+ </div >
15+ </div >
16+ </div >
17+ <!-- 多选 -->
18+ <div class =" panel"
19+ <div class =" header" div >
20+ <div class =" body"
21+ <div class =" interface"
22+ <div style =" height 300px "
23+ <VTree
24+ v-if =" showCheckable"
25+ v-model =" checkableValue"
26+ :data =" checkable"
27+ checkable
28+ ignore-mode =" parents"
29+ :cascade =" false"
30+ ></VTree >
31+ </div >
32+ </div >
33+ <div class =" desc"
34+ <div class =" desc-block"
35+ <p >多选,父节点不能选择</p >
36+ v-model: <br />
37+ {{ checkableValue }}
38+ </div >
39+ </div >
40+ </div >
41+ </div >
42+ </div >
43+ </template >
44+ 45+ <script lang="ts" setup>
46+ import VTree , { TreeNode } from ' ../src'
47+ import { IgnoreType } from ' ../src/types'
48+ import treeDataGenerator from ' ../tests/tree-data-generator'
49+ import { defineComponent , ref , nextTick } from ' vue-demi'
50+
51+ const = (extra = {}) => {
52+ return treeDataGenerator (
53+ Object .assign (
54+ {
55+ treeDepth: 3 ,
56+ nodesPerLevel: 5 ,
57+ sameIdTitle: true
58+ },
59+ extra
60+ )
61+ )
62+ }
63+
64+ const = genData ().data
65+ const = ref (' '
66+ const = ref (selectableData )
67+ const = ref (true )
68+ const = genData ().data
69+ checkableData [0 ].expand = true
70+ checkableData [1 ].children ! [0 ].disabled = true
71+ const = ref <(string | number )[]>([checkableData [0 ].id ! ])
72+ const = ref (checkableData )
73+ const = ref <IgnoreType >(' none'
74+ const = ref (true )
75+ function onIgnoreBtnClick(mode : IgnoreType ) {
76+ checkableIgnoreMode .value = mode
77+ showCheckable .value = false
78+ nextTick (() => {
79+ checkableValue .value = []
80+ showCheckable .value = true
81+ })
82+ }
83+ function onCascadeBtnClick(mode : boolean ) {
84+ checkableCascade .value = mode
85+ showCheckable .value = false
86+ nextTick (() => {
87+ checkableValue .value = []
88+ showCheckable .value = true
89+ })
90+ }
91+ function onResetBtnClick() {
92+ showCheckable .value = false
93+ nextTick (() => {
94+ checkableIgnoreMode .value = ' none'
95+ checkableCascade .value = true
96+ checkableValue .value = []
97+ showCheckable .value = true
98+ })
99+ }
100+
101+ </script >
102+ 103+ <style lang="less" scoped>
104+
105+ :deep(.ctree-tree-node_selected ) {
106+ background-color : #eef5ff ;
107+ border-radius : 4px ;
108+ .ctree-tree-node__title {
109+ background : none ;
110+ }
111+ }
112+ :deep(.ctree-tree-node__wrapper.ctree-tree-node__wrapper_is-leaf.ctree-tree-node_checked ) {
113+ background-color : #eef5ff ;
114+ border-radius : 4px ;
115+ }
116+ :deep(.ctree-tree-node__checkbox_wrapper ) {
117+ display : none ;
118+ }
119+ :deep(.ctree-tree-node__wrapper_is-leaf ) {
120+ .ctree-tree-node__checkbox_wrapper {
121+ display : flex ;
122+ }
123+ }
124+ .container {
125+ width : 100% ;
126+ height : 100% ;
127+ padding : 10px ;
128+ box-sizing : border-box ;
129+
130+ .panel {
131+ width : 100% ;
132+ margin-bottom : 10px ;
133+ border : 1px solid lightgray ;
134+ border-radius : 5px ;
135+
136+ .header {
137+ height : 30px ;
138+ border-bottom : 1px solid lightgray ;
139+ padding : 10px 30px ;
140+ }
141+
142+ .body {
143+ display : flex ;
144+
145+ .interface {
146+ flex : 1 ;
147+ padding : 10px 30px ;
148+ border-right : 1px solid lightgray ;
149+ }
150+
151+ .desc {
152+ flex : 1 ;
153+ padding : 10px 30px ;
154+
155+ .desc-block {
156+ padding : 5px 0 ;
157+ margin-bottom : 10px ;
158+ border-bottom : 1px solid lightgray ;
159+
160+ & :last-child {
161+ border-bottom : none ;
162+ }
163+ }
164+ }
165+ }
166+ }
167+ }
168+ </style >
0 commit comments