Using Vue version 3.3.6 with Composition API script setup, Typescript, PrimeVue version 3.37.0, and PrimeFlex version 3.3.1, I am trying to implement a feature in my Tree component where I can disable certain checkboxes when the selectionMode is set to "checkbox".
While exploring the TreeNode element, I found that setting the selectable key to false only hides the checkbox, which has been a point of contention on platforms like GitHub.
In my attempt to find a workaround, I started working on a solution using TreePassThroughOptions but faced two main challenges:
1- The typing system of the library is complex, forcing me to type TreeProps as any to access the node key (of type TreeNode) without causing issues in my IDE.
2- Even after applying the PrimeFlex pointer-events-none class, clicking on the apparently disabled checkbox still triggers check/uncheck actions.
Below is the code snippet I attempted to utilize:
<template>
<Tree v-model:selectionKeys="selectedTreeItems" :value="treeItems" selectionMode="checkbox" :pt="treeOpt"/>
</template>
<script setup lang="ts">
import { ref, type Ref } from 'vue';
import type { TreeNode, TreePassThroughOptions, TreeProps, TreeSelectionKeys } from 'primevue/tree';
const dataList = [
{ key: 'grid', label: 'Grid', data: 'grid', selectable: true, disabled: true, children:
[
{ key: 'grid1', label: 'Grid One', data: 'grid1', selectable: true, disabled: false},
{ key: 'grid2', label: 'Grid Two', data: 'grid2', selectable: true, disabled: false}
]
},
{ key: 'biz', label: 'Biz', data: 'biz', selectable: false, disabled: true, children:
[
{ key: 'biz1', label: 'Biz One', data: 'biz1', selectable: true, disabled: true},
{ key: 'biz2', label: 'Biz Two', data: 'biz2', selectable: true, disabled: true}
]
}
]
const treeOpt: TreePassThroughOptions = {
root: {class: 'text-xs p-0'},
checkbox: ({ instance, state, global, context, props }) => {
const myProps: any = props
const node: TreeNode = myProps.node as TreeNode
return {
class: node.disabled ? 'p-disabled pointer-events-none' : undefined
}
}
}
const treeItems: Ref<TreeNode[]> = ref([...dataList])
const selectedTreeItems: Ref<TreeSelectionKeys | undefined> = ref();
</script>