如何阻止PrimeVue Tree组件选中节点被取消选中？

你之前用@node-unselect.prevent会报错，是因为这种方式无法正确回滚组件的选中状态，反而会导致内部状态不一致。要实现单选模式下不允许取消选中，只能切换选中其他节点的需求，可以通过以下两种方式实现：

方式一：监听选中状态变化，强制非空 #

利用Vue的watch监听selection-keys的变化，当选中值变为空时，自动恢复上一次选中的节点：

<template>
    <div class="card flex justify-content-center m-auto">
        <Tree
            ref="test"
            class="w-full md:w-30rem"
            :filter="true"
            :value="treeNotes"
            v-model:selection-keys="selectedKey"
            filterMode="lenient"
            selectionMode="single"
            v-model:expandedKeys="expandedKeys"
            @node-select="selectNode"
        />
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';

// 树形数据示例
const treeNotes = ref([
    { key: 'folder1', label: '文件夹1', children: [{ key: 'file1', label: '笔记1' }] },
    { key: 'folder2', label: '文件夹2' }
]);
const selectedKey = ref(['folder1']); // 初始选中节点
const expandedKeys = ref([]);
let lastValidKey = selectedKey.value[0];

// 监听选中状态，确保始终有选中节点
watch(selectedKey, (newKeys, oldKeys) => {
    if (newKeys.length === 0) {
        // 若选中为空，恢复上一次有效的选中值
        selectedKey.value = [lastValidKey];
    } else {
        // 更新记录的有效选中值
        lastValidKey = newKeys[0];
    }
}, { deep: true });

const selectNode = (node) => {
    // 你的选中回调逻辑，比如打开对应笔记
};
</script>

方式二：在取消选中事件中重置状态 #

直接监听node-unselect事件，当用户尝试取消选中时，强制重新选中该节点：

<template>
    <div class="card flex justify-content-center m-auto">
        <Tree
            ref="test"
            class="w-full md:w-30rem"
            :filter="true"
            :value="treeNotes"
            v-model:selection-keys="selectedKey"
            filterMode="lenient"
            selectionMode="single"
            v-model:expandedKeys="expandedKeys"
            @node-select="selectNode"
            @node-unselect="handleUnselect"
        />
    </div>
</template>

<script setup>
import { ref } from 'vue';

const treeNotes = ref([/* 你的树形数据 */]);
const selectedKey = ref(['初始选中节点key']);
const expandedKeys = ref([]);

const selectNode = (node) => {
    // 选中回调逻辑
};

const handleUnselect = (node) => {
    // 取消选中时，强制重新选中当前节点
    selectedKey.value = [node.key];
};
</script>

注意事项 #

• 两种方式都要确保初始时selectedKey有默认值，避免页面加载时无选中节点的情况。
• 不要使用@node-unselect.prevent，因为PrimeVue在触发node-unselect事件前已经完成了状态更新，阻止事件无法回滚状态，只会引发组件内部报错。

内容的提问来源于stack exchange，提问作者Gribouille