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;
}