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 54c5930

Browse files
fix: virtual scroll
1 parent bc3d516 commit 54c5930

File tree

3 files changed

+90
-60
lines changed

3 files changed

+90
-60
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
<div class="test-tree">
33
<VueTree
44
ref="tree"
5-
:height="200"
5+
:height="300"
66
draggable
77
virtual
8-
:keeps="50"
8+
:keeps="100"
99
:treeData="bigTreeData"
1010
expandedAll
1111
@on-drop="dropNode"

‎lib/index.js

Lines changed: 87 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -427,76 +427,105 @@
427427
},
428428
handleClickCheckBox: function handleClickCheckBox(e) {
429429
e.stopPropagation();
430+
},
431+
renderExpandSlot: function renderExpandSlot() {
432+
var h = this.$createElement;
433+
var expandIconSlot = this.tree.expandIcon;
434+
var node = this.node,
435+
toggleFold = this.toggleFold,
436+
visibleExpand = this.visibleExpand;
437+
var expanded = node.data.expanded;
438+
return expandIconSlot ? expandIconSlot({
439+
expanded: expanded,
440+
toggleFoldCb: toggleFold
441+
}) : h("span", {
442+
"class": ['icon', expanded ? 'rotate180-enter icon-expand' : 'rotate180-leave icon-unexpand'],
443+
"on": {
444+
"click": function click() {
445+
return toggleFold(node);
446+
}
447+
},
448+
"style": {
449+
display: visibleExpand
450+
}
451+
}, ["\u25BC"]);
452+
},
453+
renderCheckbox: function renderCheckbox() {
454+
var h = this.$createElement;
455+
var node = this.node,
456+
handleClickCheckBox = this.handleClickCheckBox,
457+
selectToggle = this.selectToggle;
458+
var _this$tree2 = this.tree,
459+
checkboxSlot = _this$tree2.checkbox,
460+
showCheckbox = _this$tree2.showCheckbox;
461+
var _node$data = node.data,
462+
checked = _node$data.checked,
463+
partialSelected = _node$data.partialSelected,
464+
exceptDisabledChecked = _node$data.exceptDisabledChecked,
465+
disabled = _node$data.disabled;
466+
return showCheckbox ? checkboxSlot ? checkboxSlot({
467+
handleClickCheckBox: handleClickCheckBox,
468+
selectToggle: selectToggle,
469+
node: node.data
470+
}) : h(Checkbox, {
471+
"attrs": {
472+
"value": checked,
473+
"indeterminate": partialSelected,
474+
"disabled": disabled
475+
},
476+
"style": "margin-right: 10px;",
477+
"key": exceptDisabledChecked,
478+
"nativeOn": {
479+
"click": handleClickCheckBox
480+
},
481+
"on": {
482+
"change": function change(val) {
483+
return selectToggle(val, node);
484+
}
485+
}
486+
}) : null;
487+
},
488+
renderLoading: function renderLoading() {
489+
var h = this.$createElement;
490+
var loadingSlot = this.tree.loading;
491+
var loading = this.loading;
492+
return loading ? loadingSlot ? loadingSlot({
493+
loading: loading
494+
}) : h("div", ["\u21BB"]) : null;
495+
},
496+
renderNodeName: function renderNodeName() {
497+
var h = this.$createElement;
498+
var tree = this.tree,
499+
node = this.node;
500+
var name = node.data.name;
501+
var renderTreeNode = tree.renderTreeNode,
502+
defaultSlot = tree.$scopedSlots.default;
503+
return renderTreeNode ? renderTreeNode(node.data) : defaultSlot ? defaultSlot({
504+
node: node.data,
505+
treeNode: node
506+
}) : h("span", [name]);
430507
}
431508
},
432509
render: function render() {
433-
var _this3 = this;
434-
435510
var h = arguments[0];
436-
var tree = this.tree,
437-
node = this.node,
438-
loading = this.loading,
439-
clickContent = this.clickContent,
440-
handleClickCheckBox = this.handleClickCheckBox,
511+
var clickContent = this.clickContent,
441512
activeNode = this.activeNode,
442-
visibleExpand = this.visibleExpand;
443-
444-
var _ref = node.data || {},
445-
name = _ref.name,
446-
checked = _ref.checked,
447-
disabled = _ref.disabled,
448-
partialSelected = _ref.partialSelected,
449-
expanded = _ref.expanded,
450-
exceptDisabledChecked = _ref.exceptDisabledChecked;
451-
452-
var renderTreeNode = tree.renderTreeNode,
453-
defaultSlot = tree.$scopedSlots.default,
454-
showCheckbox = tree.showCheckbox;
513+
renderExpandSlot = this.renderExpandSlot,
514+
renderCheckbox = this.renderCheckbox,
515+
renderLoading = this.renderLoading,
516+
renderNodeName = this.renderNodeName;
455517
return h("div", {
456518
"class": ['node-content', {
457519
'active-li': activeNode
458520
}]
459-
}, [h("span", {
460-
"class": ['icon', expanded ? 'rotate180-enter icon-expand' : 'rotate180-leave icon-unexpand'],
461-
"on": {
462-
"click": function click() {
463-
return _this3.toggleFold(node);
464-
}
465-
},
466-
"style": {
467-
display: visibleExpand
468-
}
469-
}, ["\u25BC"]), h("div", {
521+
}, [renderExpandSlot(), h("div", {
470522
"class": ['inner-wrap'],
471523
"on": {
472524
"click": clickContent
473525
}
474-
}, [showCheckbox && h(Checkbox, {
475-
"attrs": {
476-
"value": checked,
477-
"indeterminate": partialSelected,
478-
"disabled": disabled
479-
},
480-
"style": "margin-right: 10px;",
481-
"key": exceptDisabledChecked,
482-
"nativeOn": {
483-
"click": handleClickCheckBox
484-
},
485-
"on": {
486-
"change": function change(val) {
487-
return _this3.selectToggle(val, node);
488-
}
489-
}
490-
}), loading && h("div", {
491-
"attrs": {
492-
"loading": true
493-
}
494-
}, ["\u21BB"]), h("div", {
526+
}, [renderCheckbox(), renderLoading(), h("div", {
495527
"class": 'node-name'
496-
}, [renderTreeNode ? renderTreeNode(node.data) : defaultSlot ? defaultSlot({
497-
node: node.data,
498-
treeNode: node
499-
}) : h("span", [name])])])]);
528+
}, [renderNodeName()])])]);
500529
}
501530
};
502531

@@ -1583,7 +1612,8 @@
15831612
computed: {
15841613
conStyles: function conStyles() {
15851614
return this.height ? {
1586-
height: "".concat(this.height, "px")
1615+
height: "".concat(this.height, "px"),
1616+
overflow: 'scroll'
15871617
} : {
15881618
height: 'auto'
15891619
};

‎src/components/Tree/VirtualTreeList.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export default {
2121
},
2222
computed: {
2323
conStyles: function () {
24-
return this.height ? { height: `${this.height}px` } : { height: 'auto' }
24+
return this.height ? { height: `${this.height}px`,overflow: 'scroll' } : { height: 'auto' }
2525
}
2626
},
2727
methods: {

0 commit comments

Comments
(0)

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