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