update Tree

update Tree

update Tree
梁灏
1 parent b566d106
Showing 4 changed files with 23 additions and 35 deletions Show diff stats
src/components/tree/tree.vue
src/styles/components/checkbox.less
src/styles/components/tree.less
test/routers/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);
+@checkbox-prefix-cls: ~"@{css-prefix}checkbox";
 .checkboxFn();
 \ No newline at end of file
@@ -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;
@@ -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);
             }
         }
     }