Element Plus的el-tree-v2 组件实现仅叶子节点显示勾选框，并且只能单选
<template>
<el-tree-v2
:data="treeData"
:props="defaultProps"
node-key="id"
ref="treeRef"
show-checkbox
:check-strictly="true"
:expand-on-click-node="false"
@node-click="handleNodeClick"
@check="handleCheck"
/>
</template>
<script setup>
import { ref } from 'vue';
const treeData = ref([
// ...树形数据
]);
const defaultProps = {
children: 'children',
label: 'label',
};
const treeRef = ref(null);
const handleNodeClick = (nodeData, node) => {
// 如果是叶子节点，则选中它
if (node.isLeaf) {
treeRef.value.setChecked(nodeData, true, true);
}
};
const handleCheck = (data, { checked }) => {
// 处理单选逻辑
if (checked) {
// 清除其他选中的节点
const checkedKeys = treeRef.value.getCheckedKeys();
if (checkedKeys.length > 1) {
treeRef.value.setCheckedKeys([data.id]);
}
}
};
</script>
<style scoped>
/* 样式穿透，隐藏非叶子节点的复选框 */
:deep(.el-tree-node) > .el-tree-node__content .el-checkbox .el-checkbox__inner {
display: none;
}
:deep(.el-tree-node.is-leaf) > .el-tree-node__content .el-checkbox .el-checkbox__inner {
display: inline-block;
}
</style>