1 | # VUE 树形控件
|
2 |
|
3 | 用清晰的层级结构展示信息,可下拉选择、展开或折叠,提供单选多选功能,支持v-model双向数据绑定
|
4 |
|
5 | ## 代码演示
|
6 |
|
7 | :::kview
|
8 |
|
9 | ```html
|
10 | <template>
|
11 | <k-tree
|
12 | v-model="selectValue"
|
13 | :show-checkbox="showCheckbox"
|
14 | :only-leaf="onlyLeaf"
|
15 | :multiple="multiple"
|
16 | :label-key="labelKey"
|
17 | :value-key="valueKey"
|
18 | :data-source="list"
|
19 | @on-toggle-expand="toggleExpand"
|
20 | @on-select-change="selectChange"
|
21 | @on-check-change="checkChange"
|
22 | />
|
23 | <div class="attrs-box">
|
24 | <button class="btn" @click="onlyLeaf=!onlyLeaf">是否只绑定叶子节点数据-> onlyLeaf : {{onlyLeaf}}</button>
|
25 | <button class="btn" @click="showCheckbox = !showCheckbox">是否展示多选-> showCheckbox : {{showCheckbox}}</button>
|
26 | <button class="btn" @click="multiple = !multiple;showCheckbox = false">是否打击多选 (showCheckbox should be false)-> multiple : {{multiple}} </button>
|
27 | </div>
|
28 | <div class="data-box">
|
29 | <p>v-model -> {{selectValue}}</p>
|
30 | </div>
|
31 | </template>
|
32 |
|
33 | <script>
|
34 |
|
35 |
|
36 | export default {
|
37 | data() {
|
38 | return {
|
39 | onlyLeaf: true,
|
40 | showCheckbox: true,
|
41 | multiple: true,
|
42 | defaultExpandAll: true,
|
43 | list: [{
|
44 | name: "霍山县",
|
45 | pId: "341500000000000",
|
46 | open: "False",
|
47 | id: "341525000000000",
|
48 | children: [{
|
49 | name: "衡山镇",
|
50 | pId: "341525000000000",
|
51 | open: "False",
|
52 | id: "341525100000000",
|
53 | children: [{
|
54 | name: "衡山镇",
|
55 | pId: "341525000000000",
|
56 | open: "False",
|
57 | id: "341525100000000"
|
58 | },
|
59 | {
|
60 | name: "与儿街镇",
|
61 | pId: "341525000000000",
|
62 | open: "False",
|
63 | id: "341525104000000"
|
64 | },
|
65 | ]
|
66 | },
|
67 | {
|
68 | name: "与儿街镇",
|
69 | pId: "341525000000000",
|
70 | open: "False",
|
71 | id: "341525104000000"
|
72 | },
|
73 | {
|
74 | name: "黑石渡镇",
|
75 | pId: "341525000000000",
|
76 | open: "False",
|
77 | id: "341525105000000"
|
78 | },
|
79 | {
|
80 | name: "诸佛庵镇",
|
81 | pId: "341525000000000",
|
82 | open: "False",
|
83 | id: "341525106000000"
|
84 | },
|
85 | {
|
86 | name: "高桥湾现代产业园",
|
87 | pId: "341525000000000",
|
88 | open: "False",
|
89 | id: "341525401000000"
|
90 | }
|
91 | ]
|
92 | }],
|
93 | showCheckBox: false,
|
94 | type: 'select',
|
95 | labelKey: "name",
|
96 | valueKey: "id",
|
97 | childrenKey: 'children',
|
98 | selectValue: '341525401000000', //双向数据绑定当前选中值
|
99 | };
|
100 | },
|
101 | mounted() {
|
102 | setTimeout(() => {
|
103 | this.selectValue = "341525106000000";
|
104 | }, 3000)
|
105 | },
|
106 | watch: {
|
107 | selectValue() {
|
108 | console.log('selectValue', this.selectValue);
|
109 | },
|
110 | },
|
111 |
|
112 | methods: {
|
113 | toggleExpand(node) {
|
114 | console.log('toggleExpand', node);
|
115 | },
|
116 | selectChange(node) {
|
117 | console.log('selectChange', node);
|
118 | },
|
119 | checkChange(nodes) {
|
120 | console.log('checkChange', nodes);
|
121 | },
|
122 | }
|
123 | };
|
124 | </script>
|
125 |
|
126 | <style>
|
127 | .attrs-box {
|
128 | margin: 10px;
|
129 | }
|
130 | .btn {
|
131 | padding: 4px 10px;
|
132 | color: #409eff;
|
133 | background: #ecf5ff;
|
134 | border-color: #b3d8ff;
|
135 | display: inline-block;
|
136 | line-height: 1;
|
137 | white-space: nowrap;
|
138 | cursor: pointer;
|
139 | background: #fff;
|
140 | border: 1px solid #dcdfe6;
|
141 | color: #606266;
|
142 | -webkit-appearance: none;
|
143 | text-align: center;
|
144 | box-sizing: border-box;
|
145 | outline: none;
|
146 | margin: 0;
|
147 | transition: .1s;
|
148 | font-weight: 500;
|
149 | -moz-user-select: none;
|
150 | -webkit-user-select: none;
|
151 | -ms-user-select: none;
|
152 | padding: 12px 20px;
|
153 | font-size: 14px;
|
154 | border-radius: 4px;
|
155 | }
|
156 |
|
157 | .data-box p {
|
158 | margin: 10px;
|
159 | }
|
160 | </style>
|
161 | ```
|
162 |
|
163 | :::
|
164 |
|
165 | ## Attributes
|
166 |
|
167 | <div class="markdown-table">
|
168 |
|
169 | | 属性 | 说明 | 类型|可选值|默认值|是否必须|
|
170 | |-------|---------|---|---|---|---|
|
171 | |dataSource|数据源| Array | - |- |是|
|
172 | |width|占用宽度(溢出文本将展示tip)|Number| -|260|-|
|
173 | |position|文本溢出tip展示位置|string|top、left、right、bottom|top|-|
|
174 | |labelKey|数据显示key|String| -|label|是
|
175 | |valueKey|取值key (不传默认传递节点完整数据)|String|-|value|-|
|
176 | |childrenKey|子集key|String|-|children|-|
|
177 | |v-model|双向数据绑定 , `props需传入valueKey,为 “,” 拼接的字符串` |String|-|-|-|
|
178 | |multiple|单击多选|-|-|-|-|
|
179 | |only-leaf|只取叶子节点数据|-|-|-|-|
|
180 | |show-checkbox|开启复选框( `复选框开启,v-model初始化可只传入需要选中的顶层节点的value` )|-|-|-|-|
|
181 | |props|dataSource数据配置选项具体看下表|-|-|-|-|
|
182 |
|
183 | </div>
|
184 |
|
185 | ## Props
|
186 |
|
187 | <div class="markdown-table">
|
188 |
|
189 | | 参数 | 说明 | 类型 | 默认值| 是否必须|
|
190 | |-------|---------|------|--------|----------|
|
191 | |selected|节点单选选中|Boolean|-|-
|
192 | |checked|节点多选选中|Boolean|-|-
|
193 | |expand|节点展开|Boolean|-|-
|
194 |
|
195 | </div>
|
196 |
|
197 | ## Events
|
198 |
|
199 | <div class="markdown-table">
|
200 |
|
201 | | 方法名 | 说明 | 参数|
|
202 | | ------ |----- | ---- |
|
203 | |on-toggle-expand|节点被点击展开收缩的时触发|传递 `dataSource` 属性的数组中该节点所对应的对象 ( 对象中 `expand` 属性即当前展开状态 )
|
204 | |on-select-change|Attributes不含show-checkbox,节点被点选的时触发|传递 `dataSource` 属性的数组中所选中的对象 |
|
205 | |on-check-change|Attributes含show-checkbox,节点checkbox被点击的时触发|传递 `dataSource` 属性的数组中所选中的对象 |
|
206 |
|
207 | </div>
|
208 |
|
209 | ### methods
|
210 |
|
211 | <div class="markdown-table">
|
212 |
|
213 | | 方法名 | 说明 | 参数|
|
214 | | ------ |----- | ---- |
|
215 | |getSelectedNodes|获取当前单击选中的所有节点|-|
|
216 | |getCheckedNodes|获取当前多选选中的所有节点|-|
|
217 |
|
218 | </div>
|
219 |
|