From ce03ac5278bd092b68bf1e70f58db2ed72d54472 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Tue, 7 Feb 2017 15:29:53 +0800
Subject: [PATCH] update Tree
---
src/components/tree/tree.vue | 36 +++++++++++-------------------------
src/styles/components/checkbox.less | 1 +
src/styles/components/tree.less | 6 +++---
test/routers/tree.vue | 15 ++++++++-------
4 files changed, 23 insertions(+), 35 deletions(-)
diff --git a/src/components/tree/tree.vue b/src/components/tree/tree.vue
index b7375fd..411c2c7 100644
--- a/src/components/tree/tree.vue
+++ b/src/components/tree/tree.vue
@@ -17,7 +17,7 @@
v-if="!item.isLeaf"
v-show="item.expand"
:class="expandCls(item)"
- :data.sync="item.node"
+ :data.sync="item.children"
:key="this.key+'.'+$index"
:multiple="multiple"
:show-checkbox="showCheckbox"
@@ -54,18 +54,6 @@
type: Boolean,
default: false
},
- onSelect: {
- type: Function,
- default () {
- return {};
- }
- },
- onCheck: {
- type: Function,
- default () {
- return {};
- }
- },
emptyText: {
type: String,
default () {
@@ -135,7 +123,7 @@
},
preHandle () {
for (let [i,item] of this.data.entries()) {
- if (!item.node || !item.node.length) {
+ if (!item.children || !item.children.length) {
this.$set(`data[${i}].isLeaf`, true);
this.$set(`data[${i}].childrenCheckedStatus`, 2);
continue;
@@ -144,7 +132,7 @@
this.$set(`data[${i}].childrenCheckedStatus`, 2);
this.$broadcast('parentChecked', true, `${this.key}.${i}`);
} else {
- let status = this.getChildrenCheckedStatus(item.node);
+ let status = this.getChildrenCheckedStatus(item.children);
this.$set(`data[${i}].childrenCheckedStatus`, status);
if (status !== 0) this.$set(`data[${i}].checked`, true);
}
@@ -194,8 +182,8 @@
if (tmp) {
res.push(node);
}
- if (node.node && node.node.length) {
- res = res.concat(this.getNodes(node.node, opt));
+ if (node.children && node.children.length) {
+ res = res.concat(this.getNodes(node.children, opt));
}
}
return res;
@@ -241,11 +229,9 @@
}
this.$broadcast('cancelSelected', ori);
}
- if (this.onSelect) {
- this.$nextTick(() => {
- this.onSelect(this.getSelectedNodes());
- });
- }
+ this.$nextTick(() => {
+ this.$emit('on-select-change', this.getSelectedNodes());
+ });
});
this.$on('cancelSelected', ori => {
this.$broadcast('cancelSelected', ori);
@@ -265,15 +251,15 @@
}
});
this.$on('childChecked', (ori, key) => {
- if (this.key === '0' && this.onCheck) {
+ if (this.key === '0') {
this.$nextTick(() => {
- this.onCheck(this.getCheckedNodes());
+ this.$emit('on-check-change', this.getCheckedNodes());
});
}
if (this === ori) return;
for (let [i,item] of this.data.entries()) {
if (this.key + '.' + i == key) {
- let temp = this.getChildrenCheckedStatus(item.node);
+ let temp = this.getChildrenCheckedStatus(item.children);
if (temp != item.childrenCheckedStatus) {
this.$set(`data[${i}].checked`, !!temp);
this.$set(`data[${i}].childrenCheckedStatus`, temp);
diff --git a/src/styles/components/checkbox.less b/src/styles/components/checkbox.less
index 77b6fe5..11da709 100644
--- a/src/styles/components/checkbox.less
+++ b/src/styles/components/checkbox.less
@@ -1 +1,2 @@
+@checkbox-prefix-cls: ~"@{css-prefix}checkbox";
.checkboxFn();
\ No newline at end of file
diff --git a/src/styles/components/tree.less b/src/styles/components/tree.less
index d998acf..97f9599 100644
--- a/src/styles/components/tree.less
+++ b/src/styles/components/tree.less
@@ -61,10 +61,10 @@
background-color: tint(@primary-color, 80%);
}
}
+ .@{checkbox-prefix-cls}-wrapper{
+ margin-right: 4px;
+ }
span {
- &.@{tree-prefix-cls}-checkbox {
- margin: 2px 4px 0 0;
- }
&.@{tree-prefix-cls}-switcher,
&.@{tree-prefix-cls}-iconEle {
display: inline-block;
diff --git a/test/routers/tree.vue b/test/routers/tree.vue
index a5f7db6..84bd633 100644
--- a/test/routers/tree.vue
+++ b/test/routers/tree.vue
@@ -3,21 +3,22 @@
:data.sync="treeData"
:show-checkbox="true"
:multiple="true"
- :on-select="selectFn"
- :on-check="checkFn"></Tree>
+ @on-select-change="selectFn"
+ @on-check-change="checkFn"></Tree>
</template>
<script>
export default {
data: function() {
return {
treeData: [{
+ expand: true,
title: 'parent 1',
selected: false,
- node: [{
+ children: [{
title: 'parent 1-0',
expand: true,
disabled: true,
- node: [{
+ children: [{
title: 'leaf',
disableCheckbox: true
}, {
@@ -26,7 +27,7 @@
}, {
title: 'parent 1-1',
checked: true,
- node: [{
+ children: [{
title: '<span style="color: red">sss</span>',
}]
}]
@@ -35,10 +36,10 @@
},
methods: {
selectFn(data){
-// console.log(data);
+ console.log(data);
},
checkFn(data){
-// console.log(data);
+ console.log(data);
}
}
}
--
libgit2 0.21.4