diff --git a/docs/components/CheckableItemSelection.vue b/docs/components/CheckableItemSelection.vue new file mode 100644 index 00000000..c8217235 --- /dev/null +++ b/docs/components/CheckableItemSelection.vue @@ -0,0 +1,50 @@ + + + diff --git a/docs/components/DocNode.vue b/docs/components/DocNode.vue index 3e291b8e..7368cbf4 100644 --- a/docs/components/DocNode.vue +++ b/docs/components/DocNode.vue @@ -49,6 +49,15 @@ here for detailed information. + + isCheckable + Boolean + + Used to make item checkable. See + here for detailed + information. + + isNew Boolean diff --git a/docs/partials/guides.pug b/docs/partials/guides.pug index 106f2051..4900a20b 100644 --- a/docs/partials/guides.pug +++ b/docs/partials/guides.pug @@ -94,6 +94,11 @@ Set `flattenSearchResults: true` to flatten the tree when searching. With this option set to `true`, only the results that match will be shown. With this set to `false` (default), its ancestors will also be displayed, even if they would not individually be included in the results. +demo('FlattenSearchResults') ++subsection('Checkable Item Selection') + :markdown-it + You can make item checkable by setting `isCheckable: true` on any leaf node or branch node. + +demo('CheckableItemSelection') + +subsection('Disable Item Selection') :markdown-it You can disable item selection by setting `isDisabled: true` on any leaf node or branch node. For non-flat mode, setting on a branch node will disable all its descendants as well. diff --git a/src/components/Option.vue b/src/components/Option.vue index d6decf82..d8688b35 100755 --- a/src/components/Option.vue +++ b/src/components/Option.vue @@ -76,6 +76,9 @@ const renderCheckboxContainer = (h, context, children) => { if (instance.disableBranchNodes && node.isBranch) { return null; } + if (!node.isCheckable) { + return null; + } return
{children}
; }; diff --git a/src/mixins/treeselectMixin.js b/src/mixins/treeselectMixin.js index b3328724..dd4d6377 100644 --- a/src/mixins/treeselectMixin.js +++ b/src/mixins/treeselectMixin.js @@ -1687,6 +1687,7 @@ export default { const isDisabled = !!node.isDisabled || (!this.flat && !isRootNode && parentNode.isDisabled); + const isCheckable = node.isCheckable ?? true; const isNew = !!node.isNew; const lowerCased = this.matchKeys.reduce( (prev, key) => ({ @@ -1717,6 +1718,7 @@ export default { this.$set(normalized, "lowerCased", lowerCased); this.$set(normalized, "nestedSearchLabel", nestedSearchLabel); this.$set(normalized, "isDisabled", isDisabled); + this.$set(normalized, "isCheckable", isCheckable); this.$set(normalized, "isNew", isNew); this.$set(normalized, "isMatched", false); this.$set(normalized, "isHighlighted", false); @@ -1962,7 +1964,7 @@ export default { }, select(node) { - if (this.disabled || node.isDisabled) { + if (this.disabled || node.isDisabled || !node.isCheckable) { return; }