Merge pull request #177 from CosSalt/master

bugfix and optimize

Author: halower

demo/package.json

@@ -3,13 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "start": "vue-cli-service serve",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
     "vue": "^2.5.17",
-    "vue-tree-halower": "^1.7.2"
+    "vue-tree-halower": "^1.8.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.1",

demo/yarn.lock

@@ -6121,6 +6121,9 @@ schema-utils@1.0.0, schema-utils@^1.0.0:
 schema-utils@^0.4.0, schema-utils@^0.4.2, schema-utils@^0.4.4, schema-utils@^0.4.5:
   version "0.4.7"
   resolved "http://registry.npm.taobao.org/schema-utils/download/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187"
+  dependencies:
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
 
 select-hose@^2.0.0:
   version "2.0.0"
@@ -7008,9 +7011,10 @@ vue-template-es2015-compiler@^1.6.0:
   version "1.6.0"
   resolved "http://registry.npm.taobao.org/vue-template-es2015-compiler/download/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
 
-vue-tree-halower@^1.6.1:
-  version "1.6.1"
-  resolved "http://registry.npm.taobao.org/vue-tree-halower/download/vue-tree-halower-1.6.1.tgz#00ce725c68c74b96523fdf5d38b1f6b5f7a74eb5"
+vue-tree-halower@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/vue-tree-halower/-/vue-tree-halower-1.8.1.tgz#813d3de1f6f7bc8a87fc514b2c3ffd8334bdc159"
+  integrity sha512-bMM3nF80aLpwMwxnKObJLLert/EozvSOQeOCHZsOKGItlH5vzmqo3sLWikPTdF8tmF1cLZYi1phUuC2IJXOjvg==
   dependencies:
     vue "^2.4.4"
 

src/components/tree.vue

@@ -106,15 +106,15 @@ export default {
       }
     },
     parentCheckedHandle(parentNode, checked, halfcheck = false) {
-      if (!parentNode || parentNode.chkDisabled || !!parentNode.checked === checked ) return false;
-      let [someBortherNodeChecked, allBortherNodeChecked] = [checked, checked];
+      if (!parentNode || parentNode.chkDisabled ) return false;
+      let someBortherNodeChecked = checked, allBortherNodeChecked = checked;
       const childNodes = parentNode.children
       if (checked) {
-        allBortherNodeChecked = childNodes.every(
-          child => child.checked && !child.halfcheck
-        );
+        allBortherNodeChecked = childNodes.every(child => child.checked);
       } else {
-        someBortherNodeChecked = childNodes.some(child => child.checked);
+        someBortherNodeChecked = childNodes.some(({ checked, halfcheck: itemHalfCheck }) => {
+          return checked || ( halfcheck && itemHalfCheck)
+        });
       }
       if (halfcheck) {
         // all / some / none
@@ -127,8 +127,7 @@ export default {
         } else if (nodeHalfcheck) {
           return false;
         }
-        const parentChecked = checked || nodeHalfcheck;
-        this.$set(parentNode, "checked", parentChecked);
+        this.$set(parentNode, "checked", allBortherNodeChecked);
       } else {
         this.$set(parentNode, "checked", allBortherNodeChecked);
       }

src/components/treeLi.vue

@@ -9,15 +9,16 @@
       ></span>
       <span
         v-if="multiple && !item.nocheck"
-        :class="[item.checked ? (item.halfcheck ? 'box-halfchecked' : 'box-checked') : 'box-unchecked', 'inputCheck']"
+        class='inputCheck'
+        :class="spanInputClass"
       >
         <input
           :disabled="item.chkDisabled"
           :class="['check', item.chkDisabled ? 'chkDisabled' : '']"
           v-if="multiple"
           type="checkbox"
           @change="changeNodeCheckStatus(item, $event)"
-          :checked="item.checked"
+          :checked="checkboxChecked"
         >
       </span>
       <loading v-if="item.loading && item.expanded"/>
@@ -166,12 +167,22 @@ export default {
     },
     position() {
       return { level: this.level, index: this.index };
+    },
+    checkboxChecked() {
+      const { checked, halfcheck } = this.item
+      return checked || halfcheck
+    },
+    spanInputClass () {
+      const { checked, halfcheck } = this.item
+      return checked ? 'box-checked' : halfcheck ? 'box-halfchecked' : 'box-unchecked'
     }
   },
   watch: {
     "item.checked": {
       handler() {
-        this.checkedChange();
+        if(!this.scoped) {
+          this.checkedChange();
+        }
       },
       immediate: true
     },