Skip to content

Commit 92f11b6

Browse files
jiaxincuijiaxincui
committed
change
1 parent d25cf63 commit 92f11b6

File tree

4 files changed

+63
-40
lines changed

4 files changed

+63
-40
lines changed

‎README.md‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,25 @@
22

33
> A simple tree component for vue.js
44
5-
**2.0版本增加multi tree支持,注意:此版本绑定的tree数据结构有所变化,加入了`[]`包裹,以支持multi tree**
5+
**2.0版本增加multi tree支持,注意:此版本绑定的tree数据结构和1.x版本不同,2.0加入了`[]`包裹,以支持multi tree**
66

77
## 介绍
88

9-
一个简单灵活的vue.js树形组件，可作为插件使用，也可直接`import`项目文件
9+
一个简单灵活的vue.js树形组件，可作为插件使用，也可直接作为`component`使用
1010

11-
使用时只需绑定tree数据`treeData`即可。
11+
使用时只需传入一个树形数据绑定。
1212

13-
组件还提供了`增删改`事件，你可以很方便的在组件上监听。
13+
组件还提供了`增删改查`事件，你可以很方便的在组件上监听。
1414

1515
不止这些，
1616

17-
- 增删改事件支持
18-
- 可选的增删改功能
17+
- 可定制的`增删改查`事件
1918
- 复选框显示可选
19+
- 初始化展开层级
2020
- 初始化勾选
2121
- 可选的按钮图标
22-
- 父节点半选状态
23-
- 自定义显示字段
22+
- 父节点半选状态支持
23+
- 显示字段自定义
2424
- ...
2525

2626

@@ -38,13 +38,15 @@ npm install vue-simple-tree --sve-dev
3838

3939
## 数据格式
4040

41-
`tree.json`
42-
> `id`必要字段,且只能以`id`表示
41+
`treeData`
4342

44-
> `name`必要字段,默认`name`,如要自定义如`display_name`,在`options`里定义`itemName:'display_name'`
43+
> `id`必要属性,`Number`
4544
46-
> `children`非必要,如果有以数组表示
45+
> `name`必要属性,`String`,可自定义,默认`name`,如`options.itemName:'display_name'`
4746
47+
> `children`非必要,`Array`
48+
49+
treeData示例
4850
```json
4951
{
5052
"data": [{
@@ -85,7 +87,7 @@ npm install vue-simple-tree --sve-dev
8587
```vue
8688
<template>
8789
<div id="app">
88-
<vue-tree :tree-data="treeData" :options="options"></vue-tree>
90+
<vue-tree v-model="checkedIds" :tree-data="treeData" :options="options"></vue-tree>
8991
</div>
9092
</template>
9193
@@ -97,7 +99,9 @@ npm install vue-simple-tree --sve-dev
9799
components: { VueTree },
98100
data () {
99101
return {
100-
//tree数据
102+
// 复选ids
103+
checkedIds: [],
104+
// tree数据
101105
treeData: Tree.data,
102106
// 设置项
103107
options: {}
@@ -128,7 +132,7 @@ npm install vue-simple-tree --sve-dev
128132
```vue
129133
<template>
130134
<div id="app">
131-
<vue-tree :tree-data="treeData" :options="options"></vue-tree>
135+
<vue-tree v-model="checkedIds" :tree-data="treeData" :options="options"></vue-tree>
132136
</div>
133137
</template>
134138
@@ -138,6 +142,7 @@ npm install vue-simple-tree --sve-dev
138142
name: 'app',
139143
data () {
140144
return {
145+
checkedIds: [],
141146
treeData: Tree.data,
142147
options: {}
143148
}
@@ -148,11 +153,12 @@ npm install vue-simple-tree --sve-dev
148153
149154
## 设置选项
150155
151-
以下代码中是默认设置。
156+
以下是默认设置.
157+
158+
你可以在`options`里覆盖默认设置，或仅设置若干项`options: {someOption: true}`
152159
153-
你可以在`options`里覆盖默认设置，或仅包含个别设置的项`options: {someOption: true}`
160+
你也可以绑定一个空的对象`:options="{}"`或直接忽略`options`
154161
155-
当然如果你想继续使用默认设置，你可以不用绑定`options`或绑定一个空的对象
156162
```
157163
options: {
158164
// String,节点显示字段

‎src/App.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export default {
6565
name: 'app',
6666
data () {
6767
return {
68-
ids: [3,4],
68+
ids: [48],
6969
7070
treeData:[{
7171
name: '根目录[1]',
@@ -168,7 +168,8 @@ export default {
168168
deleteClass: 'fa fa-trash-o',
169169
openClass: 'fa fa-angle-right',
170170
closeClass: 'fa fa-angle-down',
171-
idsWithParent: false
171+
idsWithParent: false,
172+
depthOpen: 0
172173
},
173174
174175
message: []

‎src/components/Item.vue‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
:model="item"
3434
:options="options"
3535
:ids="ids"
36+
:depth="depth + 1"
3637
:ids-with-parent="idsWithParent"
3738
@child-checked="childChecked"
3839
@half-checked="halfChecked"
@@ -64,6 +65,11 @@
6465
}
6566
},
6667
68+
depth: {
69+
type: Number,
70+
default: 0
71+
},
72+
6773
ids: {
6874
type: Array,
6975
default: function () {
@@ -101,15 +107,11 @@
101107
return {
102108
'item-bold': this.isFolder && this.options.folderBold
103109
}
104-
},
105-
106-
checkedIds() {
107-
return this.idsWithParent
108110
}
109111
},
110112
111113
watch: {
112-
checkedIds: 'idsChange'
114+
idsWithParent: 'idsChange'
113115
},
114116
115117
methods: {
@@ -190,8 +192,8 @@
190192
},
191193
192194
delChecked(id) {
193-
let index = this.idsWithParent.indexOf(id);
194-
if (index >= 0) this.$delete(this.idsWithParent, index);
195+
let idx = this.idsWithParent.indexOf(id);
196+
if (idx >= 0) this.$delete(this.idsWithParent, idx);
195197
},
196198
197199
setHalfChecked(id) {
@@ -222,14 +224,15 @@
222224
childChecked(checked) {
223225
if (checked) {
224226
this.addChecked(this.model.id);
227+
if (! this.isFolder || this.options.idsWithParent) {
228+
this.addId(this.model.id)
229+
}
225230
let child = this.model.children;
226-
let all = false;
231+
let all = true;
227232
for (let i = 0, len = child.length; i < len; i++) {
228-
if (this.checkedIds.indexOf(child[i].id) < 0) {
233+
if (this.idsWithParent.indexOf(child[i].id) < 0) {
229234
all = false;
230235
break;
231-
} else {
232-
all = true;
233236
}
234237
}
235238
if (all) {
@@ -239,19 +242,17 @@
239242
}
240243
} else {
241244
let child = this.model.children;
242-
let none = false;
245+
let none = true;
243246
for (let i = 0, len = child.length; i < len; i++) {
244-
if (this.checkedIds.indexOf(child[i].id) >= 0) {
247+
if (this.idsWithParent.indexOf(child[i].id) >= 0) {
245248
none = false;
246249
break;
247-
} else {
248-
none = true;
249250
}
250251
}
251252
if (none) {
252253
let noneChild = true;
253254
let childIds = this.allChildIds(this.model, new Array(0));
254-
let checkedIds = this.checkedIds;
255+
let checkedIds = this.idsWithParent;
255256
for (let i = 0, len = checkedIds.length; i < len; i++) {
256257
if (childIds.indexOf(checkedIds[i]) >= 0) {
257258
noneChild = false;
@@ -302,11 +303,17 @@
302303
},
303304
304305
idsChange(val) {
306+
if (this.isFolder && this.depth < this.options.depthOpen) {
307+
this.open = true
308+
}
305309
if (val.indexOf(this.model.id) >= 0) {
306310
this.checked = true;
307311
if (this.options.checkedOpen && this.isFolder) {
308312
this.open = true
309313
}
314+
if (this.isFolder && ! this.options.idsWithParent) {
315+
this.delId(this.model.id)
316+
}
310317
this.$emit('child-checked', true);
311318
} else {
312319
this.checked = false;

‎src/components/VueTree.vue‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
:ids-with-parent="idsWithParent"
77
:model="item"
88
:options="termOptions"
9+
:depth="0"
910
@add-a-child="addAChild"
1011
@item-click="itemClick"
1112
@item-edit="itemEdit"
@@ -51,6 +52,8 @@
5152
checkbox: true,
5253
checkedOpen: true,
5354
folderBold: true,
55+
idsWithParent: false,
56+
depthOpen: 0,
5457
showAdd: true,
5558
showEdit: true,
5659
showDelete: true,
@@ -59,7 +62,7 @@
5962
deleteClass: 'fa fa-trash-o',
6063
openClass: 'fa fa-angle-right',
6164
closeClass: 'fa fa-angle-down',
62-
idsWithParent: false
65+
6366
},
6467
termOptions: {},
6568
idsWithParent: []
@@ -91,9 +94,15 @@
9194
},
9295
initOptions () {
9396
this.termOptions = Object.assign({}, this.defaultOptions, this.options);
94-
// if (! (this.termOptions.checkedIds && this.termOptions.checkedIds.length) || this.ids.length) {
95-
// this.idsWithParent = this.initIds;
96-
// }
97+
if (! (this.termOptions.checkedIds && this.termOptions.checkedIds.length) || this.ids.length) {
98+
// for (let i = 0, len = this.ids.length; i < len; i++) {
99+
// this.idsWithParent.push(this.ids[i])
100+
// }
101+
this.idsWithParent = this.ids.slice(0)
102+
// this.idsWithParent = this.ids.sort();
103+
// this.$set(this.idsWithParent)
104+
// this.idsWithParent = Object.assign({}, this.idsWithParent, this.initIds)
105+
}
97106
}
98107
},
99108

0 commit comments

Comments
 (0)