PrimeVue复选框树形组件：节点按钮触发选中及样式问题问询

问题1：点击操作按钮触发节点选中状态切换 #

原因是按钮的点击事件向上冒泡到Tree节点的点击事件，导致触发选中切换。给按钮的点击事件添加.stop修饰符即可阻止事件冒泡：

<Button icon="pi pi-ellipsis-v" outlined rounded size="small" @click.stop="doAction(node)" v-if="node.selectable"></Button>

问题2：样式显示异常 #

文本底部对齐 #

给节点内容容器添加Flex布局实现垂直居中，直接在slot的容器上添加PrimeFlex类即可：

<template v-slot:default="{ node }">
  <div class="flex items-center gap-2">
    {{ node.label }}
    <!-- 按钮代码 -->
  </div>
</template>

操作按钮尺寸过大 #

除了使用size="small"，额外添加自定义类缩小按钮内边距，同时调整Tree节点的整体内边距让布局更协调：

<Button icon="pi pi-ellipsis-v" outlined rounded size="small" class="!p-1" @click.stop="doAction(node)" v-if="node.selectable"></Button>

const treeOpt: TreePassThroughOptions = {
  root: {class: 'text-xs'},
  content: {class: 'p-1 flex items-center'}
}

完整修改后的代码 #

<template>
  <Tree 
    v-model:selectionKeys="selectedTreeItems" 
    :value="treeItems" 
    selectionMode="checkbox" 
    :pt="treeOpt" 
    @nodeSelect="toggleStuff" 
    @nodeUnselect="toggleStuff"
  >
    <template v-slot:default="{ node }">
      <div class="flex items-center gap-2">
        {{ node.label }}
        <Button 
          icon="pi pi-ellipsis-v" 
          outlined 
          rounded 
          size="small" 
          class="!p-1"
          @click.stop="doAction(node)" 
          v-if="node.selectable"
        ></Button>
      </div>
    </template>
  </Tree>
</template>

<script setup lang="ts">
import { ref, type Ref } from 'vue';
import type { TreeNode, TreePassThroughOptions, 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'},
  content: {class: 'p-1 flex items-center'}
}
const treeItems: Ref<TreeNode[]> = ref([...dataList])
const selectedTreeItems: Ref<TreeSelectionKeys | undefined> = ref();

function doAction(node:TreeNode) {
  console.log('Action: ', node);
}

function toggleStuff(node: TreeNode) {
  // Toggling stuff
}
</script>

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