fix: node expanded

Create-Peace · Sep 8, 2021 · 19fb1ea · 19fb1ea
1 parent 7e212ea
commit 19fb1ea
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 46 deletions.
diff --git a/examples/src/views/custom/index.vue b/examples/src/views/custom/index.vue
@@ -1,59 +1,70 @@
 <template>
-   <div class="test-tree">
-      <VueTree
-        ref="tree4"
-        :treeData="treeData"
-        showCheckbox>
-
-        <template v-slot="{ node, treeNode }">
-          <span style="color: #f00">{{node.name}}</span> 
-          <a class="link-color ml20" @click.stop="handleAddChild(treeNode)">增加</a>
-          <a class="link-color ml20" @click.stop="handleRemoveChild(treeNode)">删除</a>
-          <a class="link-color ml20" @click.stop="toggleDisable(node)">{{ node.disabled ? '开启' : '禁用'}}</a>
-        </template>
-        <template #expandIcon="{expanded, toggleFold, node}">
-          <div style="padding: 2px">
-            <div @click="toggleFold(node)" v-if="expanded">+</div>
-            <div @click="toggleFold(node)" v-else>-</div>
-          </div>
-        </template>
-      </VueTree>
-    </div>
+  <div class="test-tree">
+    <VueTree ref="tree4" :treeData="treeData" showCheckbox>
+      <template v-slot="{ node, treeNode }">
+        <span style="color: #f00">{{ node.name }}</span>
+        <a class="link-color ml20" @click.stop="handleAddChild(treeNode)"
+          >增加</a
+        >
+        <a class="link-color ml20" @click.stop="handleRemoveChild(treeNode)"
+          >删除</a
+        >
+        <a class="link-color ml20" @click.stop="toggleDisable(node)">{{
+          node.disabled ? "开启" : "禁用"
+        }}</a>
+      </template>
+      <template #expandIcon="{expanded, toggleFold, node}">
+        <div class="c-expand" @click="toggleFold(node)" v-if="expanded">-</div>
+        <div
+          class="c-expand"
+          @click="toggleFold(node)"
+          v-else
+        >
+          +
+        </div>
+      </template>
+    </VueTree>
+  </div>
 </template>
 <script>
-import { treeData } from '../../assets/treeData'
-import Mock from '../../utils/mock'
+import { treeData } from "../../assets/treeData";
+import Mock from "../../utils/mock";
 
 export default {
-  name: 'Custom',
-  data () {
+  name: "Custom",
+  data() {
     return {
       treeData,
-      count: 0
-    }
+      count: 0,
+    };
   },
-  updated () {
-    console.log('updated')
+  updated() {
+    console.log("updated");
   },
   methods: {
     handleAddChild(treeNode) {
-      this.maxId += 1
-      const { name } = Mock.mock({'name': "@ctitle(4,6)"})
+      this.maxId += 1;
+      const { name } = Mock.mock({ name: "@ctitle(4,6)" });
       const treeData = {
         id: this.maxId,
-        name
-      }
-      this.$refs.tree4.appendChild(treeData, treeNode)
+        name,
+      };
+      this.$refs.tree4.appendChild(treeData, treeNode);
     },
     handleRemoveChild(treeNode) {
-      this.$refs.tree4.removeChild(treeNode)
+      this.$refs.tree4.removeChild(treeNode);
     },
     toggleDisable(node) {
-      this.$set(node, 'disabled', !node.disabled)
+      this.$set(node, "disabled", !node.disabled);
     },
-
-
-  }
-
+  },
+};
+</script>
+<style>
+.c-expand {
+  line-height: 12px;
+  width: 12px;
+  text-align: center;
+  border: 1px solid #000;
 }
-</script>
+</style>
diff --git a/lib/style/index.css b/lib/style/index.css
@@ -90,6 +90,7 @@
   width: 100%;
   position: relative;
   display: flex;
+  align-items: center;
   padding-left: 22px;
 }
 .vue-tree .child-node .node-content .icon {

diff --git a/src/components/Tree/TreeNodeContent.js b/src/components/Tree/TreeNodeContent.js
@@ -70,11 +70,11 @@ export default {
     handleClickCheckBox (e) {
       e.stopPropagation()
     },
-    renderExpandSlot () {
-      const { $scopedSlots: { expandIcon: expandIconSlot } } = this.tree
+    renderExpand () {
+      const { $scopedSlots: { expandIcon: expandIconSlot }, lazy } = this.tree
       const { node, toggleFold, visibleExpand } = this
-      const { data: { expanded }, children } = node
-      return children && children.length ? expandIconSlot ? <div style={{ display: visibleExpand }}>{expandIconSlot({ expanded, node, toggleFold })}</div> : (<span class={['icon', expanded ? 'rotate180-enter icon-expand' : 'rotate180-leave icon-unexpand']} onClick={() => toggleFold(node)} >▼</span>) : null
+      const { data: { expanded, isLeaf }, children } = node
+      return (children && children.length) || (lazy && !isLeaf) ? expandIconSlot ? <div style={{ display: visibleExpand }}>{expandIconSlot({ expanded, node, toggleFold })}</div> : (<span class={['icon', expanded ? 'rotate180-enter icon-expand' : 'rotate180-leave icon-unexpand']} onClick={() => toggleFold(node)} >▼</span>) : null
     },
     renderCheckbox () {
       const { node, handleClickCheckBox, selectToggle } = this
@@ -103,12 +103,12 @@ export default {
     }
   },
   render () {
-    const { clickContent, activeNode, renderExpandSlot, renderCheckbox, renderLoading, renderNodeName } = this
+    const { clickContent, activeNode, renderExpand, renderCheckbox, renderLoading, renderNodeName } = this
 
     return (<div
       class={['node-content', { 'active-li': activeNode }]}
     >
-      {renderExpandSlot()}
+      {renderExpand()}
       <div class={['inner-wrap']} onClick={clickContent}>
         {
           renderCheckbox()

diff --git a/src/components/Tree/styles/index.less b/src/components/Tree/styles/index.less
@@ -98,6 +98,7 @@
         width: 100%;
         position: relative;
         display: flex;
+        align-items: center;
         padding-left: 22px;
         .icon {
           position: absolute;