mirrors/element
1
0
Fork 0
mirror of https://github.com/ElemeFE/element.git synced 2025-12-19 12:04:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve Tree:

Browse Source 
1. Add props: renderContent, highlightCurrent
2. Fix Bug: tree do not change when data changed
This commit is contained in:
furybean
2016-10-18 00:31:37 +08:00
parent baf3d192d8
commit 785bed20df
7 changed files with 152 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
packages/tree/src/tree-node.vue
View File

@@ -1,29 +1,42 @@
<template>
<div class="el-tree-node"
:class="{ expanded: childrenRendered && expanded }">
<div class="el-tree-node__content" :style="{ 'padding-left': node.level * 16 + 'px' }"
@click="handleExpandIconClick">
<span class="el-tree-node__expand-icon"
:class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }"
></span>
<el-checkbox v-if="showCheckbox" :indeterminate="node.indeterminate" v-model="node.checked" @change="handleCheckChange" @click.native="handleUserClick"></el-checkbox>
@click.stop="handleClick"
:class="{ expanded: childNodeRendered && expanded, 'is-current': $tree.currentNode === _self }">
<div class="el-tree-node__content"
:style="{ 'padding-left': node.level * 16 + 'px' }"
@click="handleExpandIconClick">
<span
class="el-tree-node__expand-icon"
:class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }">
</span>
<el-checkbox
v-if="showCheckbox"
v-model="node.checked"
:indeterminate="node.indeterminate"
@change="handleCheckChange"
@click.native="handleUserClick">
</el-checkbox>
<span
v-if="node.loading"
class="el-tree-node__icon el-icon-loading"
>
class="el-tree-node__icon el-icon-loading">
</span>
<span class="el-tree-node__label" v-html="node.label"></span>
<node-content :node="node"></node-content>
</div>
<collapse-transition>
<div class="el-tree-node__children"
<div
class="el-tree-node__children"
v-show="expanded">
<el-tree-node v-for="child in node.children" :node="child"></el-tree-node>
<el-tree-node
:render-content="renderContent"
v-for="child in node.childNodes"
:node="child">
</el-tree-node>
</div>
</collapse-transition>
</div>
</template>
<script type="text/ecmascript-6">
<script type="text/jsx">
import CollapseTransition from './transition';
export default {
@@ -34,18 +47,35 @@
default() {
return {};
}
}
},
props: {},
renderContent: Function
},
components: {
CollapseTransition
CollapseTransition,
NodeContent: {
props: {
node: {
required: true
}
},
render(h) {
const parent = this.$parent;
return (
parent.renderContent
? parent.renderContent.call(parent._renderProxy, h, { _self: parent.$parent.$vnode.context, node: this.node })
: <span class="el-tree-node__label">{ this.node.label }</span>
);
}
}
},
data() {
return {
$tree: null,
expanded: false,
childrenRendered: false,
childNodeRendered: false,
showCheckbox: false,
oldChecked: null,
oldIndeterminate: null
@@ -71,21 +101,25 @@
this.indeterminate = indeterminate;
},
handleClick() {
this.$tree.currentNode = this;
},
handleExpandIconClick(event) {
let target = event.target;
if (target.tagName.toUpperCase() !== 'DIV' &&
target.parentNode.nodeName.toUpperCase() !== 'DIV' ||
target.nodeName.toUpperCase() === 'LABLE') return;
target.parentNode.nodeName.toUpperCase() !== 'DIV' ||
target.nodeName.toUpperCase() === 'LABEL') return;
if (this.expanded) {
this.node.collapse();
this.expanded = false;
} else {
this.node.expand(() => {
this.expanded = true;
this.childrenRendered = true;
this.childNodeRendered = true;
});
}
this.$tree.$emit('node-click', this.node.data);
this.$tree.$emit('node-click', this.node.data, this.node, this);
},
handleUserClick() {
@@ -111,6 +145,12 @@
}
const tree = this.$tree;
const props = this.props || {};
const childrenKey = props['children'] || 'children';
this.$watch(`node.data.${childrenKey}`, () => {
this.node.updateChildren();
});
if (!tree) {
console.warn('Can not find node\'s tree.');