With Vue 3.3.6 in composition API script setup style, Typescript, PrimeVue 3.37.0 and PrimeFlex 3.3.1, I would like, in my Tree component (selectionMode="checkbox"), to be able to disable certain checkboxes.
The TreeNode element offers a selectable key but setting it to false only hides the checkbox. (as some people complain on github)
So I started to develop a hacky solution via TreePassThroughOptions but I ran into two problems:
1- The typing of the lib is chaotic and I have to type TreeProps as any to reach the node key (of type TreeNode) without my IDE having a stroke.
2- Even when applying the PrimeFlex pointer-events-none class, click on the checkbox (which appears disabled) check/uncheck regardless.
Here is the code I tried to make work:
<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>