Updated Tree to V3
parent
99a1ee7dfc
commit
f2d0121f12
|
@ -12,7 +12,8 @@
|
||||||
</div>
|
</div>
|
||||||
<span :class="icon"></span>
|
<span :class="icon"></span>
|
||||||
<span class="p-treenode-label">
|
<span class="p-treenode-label">
|
||||||
<TreeNodeTemplate :node="node" :template="templates[node.type]||templates['default']" />
|
<component :is="templates[node.type]||templates['default']" :node="node" v-if="templates[node.type]||templates['default']"/>
|
||||||
|
<template v-else>{{node.label}}</template>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<ul class="p-treenode-children" role="group" v-if="hasChildren && expanded">
|
<ul class="p-treenode-children" role="group" v-if="hasChildren && expanded">
|
||||||
|
@ -28,27 +29,6 @@
|
||||||
import DomHandler from '../utils/DomHandler';
|
import DomHandler from '../utils/DomHandler';
|
||||||
import Ripple from '../ripple/Ripple';
|
import Ripple from '../ripple/Ripple';
|
||||||
|
|
||||||
const TreeNodeTemplate = {
|
|
||||||
functional: true,
|
|
||||||
props: {
|
|
||||||
node: {
|
|
||||||
type: null,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
template: {
|
|
||||||
type: null,
|
|
||||||
default: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
render(createElement, context) {
|
|
||||||
const content = context.props.template ? context.props.template({
|
|
||||||
'node': context.props.node
|
|
||||||
}): context.props.node.label;
|
|
||||||
|
|
||||||
return [content];
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'sub-treenode',
|
name: 'sub-treenode',
|
||||||
props: {
|
props: {
|
||||||
|
@ -310,9 +290,6 @@ export default {
|
||||||
return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].partialChecked: false;
|
return this.selectionKeys ? this.selectionKeys[this.node.key] && this.selectionKeys[this.node.key].partialChecked: false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
|
||||||
'TreeNodeTemplate': TreeNodeTemplate
|
|
||||||
},
|
|
||||||
directives: {
|
directives: {
|
||||||
'ripple': Ripple
|
'ripple': Ripple
|
||||||
}
|
}
|
||||||
|
|
|
@ -83,7 +83,7 @@ export default {
|
||||||
children: [
|
children: [
|
||||||
{key: '0-0', label: 'What is Vue.js?', data:'https://vuejs.org/v2/guide/#What-is-Vue-js', type: 'url'},
|
{key: '0-0', label: 'What is Vue.js?', data:'https://vuejs.org/v2/guide/#What-is-Vue-js', type: 'url'},
|
||||||
{key: '0-1', label: 'Getting Started', data: 'https://vuejs.org/v2/guide/#Getting-Started', type: 'url'},
|
{key: '0-1', label: 'Getting Started', data: 'https://vuejs.org/v2/guide/#Getting-Started', type: 'url'},
|
||||||
{key: '0-2', label: 'Declarative Rendering', data:'https://vuejs.org/v2/guide/#Declarative-Rendering', type:' url'},
|
{key: '0-2', label: 'Declarative Rendering', data:'https://vuejs.org/v2/guide/#Declarative-Rendering', type:'url'},
|
||||||
{key: '0-3', label: 'Conditionals and Loops', data: 'https://vuejs.org/v2/guide/#Conditionals-and-Loops', type: 'url'}
|
{key: '0-3', label: 'Conditionals and Loops', data: 'https://vuejs.org/v2/guide/#Conditionals-and-Loops', type: 'url'}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue