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"> + @on-select-change="selectFn" + @on-check-change="checkFn">