tree-select 组件：实现了删除 tag 同时取消 tree 对应节点的选中状态

xxapp · Jul 26, 2017 · de83e97 · de83e97
1 parent 2f338be
commit de83e97
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 8 deletions.
diff --git a/components/ms-tree-select/ms-tree-select-panel.html b/components/ms-tree-select/ms-tree-select-panel.html
@@ -1,3 +1,3 @@
 <div style="overflow: auto">
-    <xmp is="ms-tree" :widget="{checkable: @multiple,tree: @treeData, onSelect:@handleSelect, onCheck:@handleCheck}"></xmp>
+    <xmp is="ms-tree" :widget="{checkable: @multiple,tree: @treeData, checkedKeys:@checkedKeys, onSelect:@handleSelect, onCheck:@handleCheck}"></xmp>
 </div>
diff --git a/components/ms-tree-select/ms-tree-select-panel.ts b/components/ms-tree-select/ms-tree-select-panel.ts
@@ -5,7 +5,7 @@ export default function (cmpVm) {
         return avalon.vmodels[cmpVm.panelVmId];
     }
 
-    return avalon.define({
+    const vm = avalon.define({
         $id: cmpVm.panelVmId,
         checkedKeys: [],
         selection: [],
@@ -72,4 +72,6 @@ export default function (cmpVm) {
             cmpVm.selection = selection;
         }
     });
+
+    return vm;
 }
diff --git a/components/ms-tree-select/ms-tree-select.md b/components/ms-tree-select/ms-tree-select.md
@@ -45,4 +45,18 @@ avalon.define({
 ### 组件参数
 
 | 参数 | 说明 | 类型 | 默认值 |
-|-----|-----|-----|-----|
+|-----|-----|-----|-----|
+| value | 默认值 | string\[\] | \[\] |
+| multiple | 是否多选 | boolean | false |
+| treeData | 树数据 | TreeNode\[\] | \[\] |
+| showSearch | 是否显示搜索框 | boolean | false |
+
+> 继承 [ms-control 组件](#!/form-control) 的所有参数
+
+TreeNode
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----|-----|-----|-----|
+| title | 标题 | string | - |
+| key | 节点标识 | string | - |
+| children | 子节点 | TreeNode\[\] | - |
diff --git a/components/ms-tree-select/ms-tree-select.ts b/components/ms-tree-select/ms-tree-select.ts
@@ -55,7 +55,7 @@ controlComponent.extend({
             this.selection.removeAll(o => o.key === option.key);
             const selection = this.selection.toJSON();
             const value = selection.map(s => s.key);
-            avalon.vmodels[this.panelVmId].selection = selection;
+                avalon.vmodels[this.panelVmId].checkedKeys = value;
             this.focusSearch();
             this.handleChange({
                 target: { value: this.multiple ? value : value[0] || '' },

diff --git a/components/ms-tree/ms-tree.md b/components/ms-tree/ms-tree.md
@@ -64,4 +64,4 @@ TreeNode
 |-----|-----|-----|-----|
 | title | 标题 | string | - |
 | key | 节点标识 | string | - |
-| children | 子节点 | TreeNodep\[\] | - |
+| children | 子节点 | TreeNode\[\] | - |
diff --git a/components/ms-tree/ms-tree.ts b/components/ms-tree/ms-tree.ts
@@ -25,7 +25,7 @@ avalon.component('ms-tree', {
             });
             const checkedKeys = checkedNodes.map(n => n.key);
 
-            this.checkedKeys = checkedKeys
+            //this.checkedKeys = checkedKeys
             this.onCheck(checkedKeys, {
                 checked: node.checked,
                 checkedNodes: checkedNodes,
@@ -62,8 +62,13 @@ avalon.component('ms-tree', {
                 }
             }, this.tree.toJSON());
 
-            treeObj.getNodesByFilter(n => this.checkedKeys.contains(n.key)).forEach(n => {
-                treeObj.checkNode(n, true, true);
+            this.$fire('checkedKeys', this.checkedKeys);
+
+            this.$watch('checkedKeys', v => {
+                treeObj.checkAllNodes(false);
+                treeObj.getNodesByFilter(n => v.contains(n.key)).forEach(n => {
+                    treeObj.checkNode(n, true, true);
+                });
             });
         }
     }