Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 19fb1ea

Browse files
fix: node expanded
1 parent 7e212ea commit 19fb1ea

File tree

4 files changed

+59
-46
lines changed

4 files changed

+59
-46
lines changed

‎examples/src/views/custom/index.vue

Lines changed: 51 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,70 @@
11
<template>
2-
<div class="test-tree">
3-
<VueTree
4-
ref="tree4"
5-
:treeData="treeData"
6-
showCheckbox>
7-
8-
<template v-slot="{ node, treeNode }">
9-
<span style="color: #f00">{{node.name}}</span>
10-
<a class="link-color ml20" @click.stop="handleAddChild(treeNode)">增加</a>
11-
<a class="link-color ml20" @click.stop="handleRemoveChild(treeNode)">删除</a>
12-
<a class="link-color ml20" @click.stop="toggleDisable(node)">{{ node.disabled ? '开启' : '禁用'}}</a>
13-
</template>
14-
<template #expandIcon="{expanded, toggleFold, node}">
15-
<div style="padding: 2px">
16-
<div @click="toggleFold(node)" v-if="expanded">+</div>
17-
<div @click="toggleFold(node)" v-else>-</div>
18-
</div>
19-
</template>
20-
</VueTree>
21-
</div>
2+
<div class="test-tree">
3+
<VueTree ref="tree4" :treeData="treeData" showCheckbox>
4+
<template v-slot="{ node, treeNode }">
5+
<span style="color: #f00">{{ node.name }}</span>
6+
<a class="link-color ml20" @click.stop="handleAddChild(treeNode)"
7+
>增加</a
8+
>
9+
<a class="link-color ml20" @click.stop="handleRemoveChild(treeNode)"
10+
>删除</a
11+
>
12+
<a class="link-color ml20" @click.stop="toggleDisable(node)">{{
13+
node.disabled ? "开启" : "禁用"
14+
}}</a>
15+
</template>
16+
<template #expandIcon="{expanded, toggleFold, node}">
17+
<div class="c-expand" @click="toggleFold(node)" v-if="expanded">-</div>
18+
<div
19+
class="c-expand"
20+
@click="toggleFold(node)"
21+
v-else
22+
>
23+
+
24+
</div>
25+
</template>
26+
</VueTree>
27+
</div>
2228
</template>
2329
<script>
24-
import { treeData } from '../../assets/treeData'
25-
import Mock from '../../utils/mock'
30+
import { treeData } from "../../assets/treeData";
31+
import Mock from "../../utils/mock";
2632
2733
export default {
28-
name: 'Custom',
29-
data() {
34+
name: "Custom",
35+
data() {
3036
return {
3137
treeData,
32-
count: 0
33-
}
38+
count: 0,
39+
};
3440
},
35-
updated() {
36-
console.log('updated')
41+
updated() {
42+
console.log("updated");
3743
},
3844
methods: {
3945
handleAddChild(treeNode) {
40-
this.maxId += 1
41-
const { name } = Mock.mock({'name': "@ctitle(4,6)"})
46+
this.maxId += 1;
47+
const { name } = Mock.mock({name: "@ctitle(4,6)" });
4248
const treeData = {
4349
id: this.maxId,
44-
name
45-
}
46-
this.$refs.tree4.appendChild(treeData, treeNode)
50+
name,
51+
};
52+
this.$refs.tree4.appendChild(treeData, treeNode);
4753
},
4854
handleRemoveChild(treeNode) {
49-
this.$refs.tree4.removeChild(treeNode)
55+
this.$refs.tree4.removeChild(treeNode);
5056
},
5157
toggleDisable(node) {
52-
this.$set(node, 'disabled', !node.disabled)
58+
this.$set(node, "disabled", !node.disabled);
5359
},
54-
55-
56-
}
57-
60+
},
61+
};
62+
</script>
63+
<style>
64+
.c-expand {
65+
line-height: 12px;
66+
width: 12px;
67+
text-align: center;
68+
border: 1px solid #000;
5869
}
59-
</script>
70+
</style>

‎lib/style/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,7 @@
9090
width: 100%;
9191
position: relative;
9292
display: flex;
93+
align-items: center;
9394
padding-left: 22px;
9495
}
9596
.vue-tree .child-node .node-content .icon {

‎src/components/Tree/TreeNodeContent.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -70,11 +70,11 @@ export default {
7070
handleClickCheckBox (e) {
7171
e.stopPropagation()
7272
},
73-
renderExpandSlot () {
74-
const { $scopedSlots: { expandIcon: expandIconSlot } } = this.tree
73+
renderExpand () {
74+
const { $scopedSlots: { expandIcon: expandIconSlot }, lazy } = this.tree
7575
const { node, toggleFold, visibleExpand } = this
76-
const { data: { expanded }, children } = node
77-
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
76+
const { data: { expanded, isLeaf }, children } = node
77+
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
7878
},
7979
renderCheckbox () {
8080
const { node, handleClickCheckBox, selectToggle } = this
@@ -103,12 +103,12 @@ export default {
103103
}
104104
},
105105
render () {
106-
const { clickContent, activeNode, renderExpandSlot, renderCheckbox, renderLoading, renderNodeName } = this
106+
const { clickContent, activeNode, renderExpand, renderCheckbox, renderLoading, renderNodeName } = this
107107

108108
return (<div
109109
class={['node-content', { 'active-li': activeNode }]}
110110
>
111-
{renderExpandSlot()}
111+
{renderExpand()}
112112
<div class={['inner-wrap']} onClick={clickContent}>
113113
{
114114
renderCheckbox()

‎src/components/Tree/styles/index.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@
9898
width: 100%;
9999
position: relative;
100100
display: flex;
101+
align-items: center;
101102
padding-left: 22px;
102103
.icon {
103104
position: absolute;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /