Refactor recursive rendering
parent
5a45e98b1b
commit
5c32efa8e9
|
@ -1,8 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import TreeTableRow from './TreeTableRow';
|
import TreeTableRow from './TreeTableRow';
|
||||||
import TreeTableRowRecursiveLoader from './TreeTableRowRecursiveLoader';
|
|
||||||
|
|
||||||
export default {
|
const TreeTableRowLoader = {
|
||||||
functional: true,
|
functional: true,
|
||||||
props: {
|
props: {
|
||||||
node: {
|
node: {
|
||||||
|
@ -48,7 +47,7 @@ export default {
|
||||||
childNodeProps.node = childNode;
|
childNodeProps.node = childNode;
|
||||||
childNodeProps.level = context.props.level + 1;
|
childNodeProps.level = context.props.level + 1;
|
||||||
|
|
||||||
let childNodeElement = createElement(TreeTableRowRecursiveLoader, {
|
let childNodeElement = createElement(TreeTableRowLoader, {
|
||||||
props: childNodeProps,
|
props: childNodeProps,
|
||||||
on: {
|
on: {
|
||||||
'node-toggle': context.listeners['node-toggle']
|
'node-toggle': context.listeners['node-toggle']
|
||||||
|
@ -62,4 +61,6 @@ export default {
|
||||||
return element;
|
return element;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export default TreeTableRowLoader;
|
||||||
</script>
|
</script>
|
|
@ -1,66 +0,0 @@
|
||||||
<script>
|
|
||||||
/* Workaround as functional vue component does not allow recursive call and vue fragments are only available in 3.0 */
|
|
||||||
import TreeTableRow from './TreeTableRow';
|
|
||||||
import TreeTableRowLoader from './TreeTableRowLoader';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
functional: true,
|
|
||||||
props: {
|
|
||||||
node: {
|
|
||||||
type: null,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
columns: {
|
|
||||||
type: null,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
expandedKeys: {
|
|
||||||
type: null,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
selectionKeys: {
|
|
||||||
type: null,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
selectionMode: {
|
|
||||||
type: String,
|
|
||||||
default: null
|
|
||||||
},
|
|
||||||
level: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
render(createElement, context) {
|
|
||||||
const root = createElement(TreeTableRow, {
|
|
||||||
props: context.props,
|
|
||||||
on: {
|
|
||||||
'node-toggle': context.listeners['node-toggle']
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
let element = [root];
|
|
||||||
const node = context.props.node;
|
|
||||||
const expanded = context.props.expandedKeys && context.props.expandedKeys[node.key] === true;
|
|
||||||
|
|
||||||
if (expanded) {
|
|
||||||
for (let childNode of node.children) {
|
|
||||||
let childNodeProps = {...context.props};
|
|
||||||
childNodeProps.node = childNode;
|
|
||||||
childNodeProps.level = context.props.level + 1;
|
|
||||||
|
|
||||||
let childNodeElement = createElement(TreeTableRowLoader, {
|
|
||||||
props: childNodeProps,
|
|
||||||
on: {
|
|
||||||
'node-toggle': context.listeners['node-toggle']
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
element.push(childNodeElement);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return element;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
Loading…
Reference in New Issue