vue3 el-tree默认最后一级显示复选框

Vue3中的`el-tree`组件是Element Plus库提供的一个树形控件，它用于显示树形数据结构。在Vue3中，`el-tree`组件默认情况下会在所有节点显示复选框，无论该节点是顶级还是最后一级。如果你想要控制只有最后一级节点显示复选框，你需要通过数据结构和插槽（slot）来自定义实现这一行为。

在`el-tree`中，你可以利用`render-content`插槽来自定义节点的渲染方式。通过这个插槽，你可以控制节点的显示内容，包括是否显示复选框。下面是一个简单的示例代码，展示如何在Vue3中使用`el-tree`并控制最后一级节点显示复选框：

<template>
  <el-tree
    :data="data"
    show-checkbox
    :props="defaultProps"
    default-expand-all
    :render-content="renderContent"
  >
  </el-tree>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElTree } from 'element-plus';

const data = reactive([
  // ... 你的树形数据
]);

const defaultProps = {
  children: 'children',
  label: 'label',
};

const renderContent = (h, { node, data, store }) => {
  const { level } = node;
  return h('span', [
    level === 0 || level === 1 ? null : h('el-checkbox', {
      props: {
        indeterminate: node.indeterminate,
      },
    }),
    data.label,
  ]);
};

const elTree = ref(null);
</script>

在这个例子中，我们通过判断节点的`level`属性来决定是否渲染复选框。`level`属性表示节点的层级，通常根节点是第一级（level=0）。我们通过`render-content`插槽自定义了节点的渲染逻辑，只有当`level`不等于0且不等于1时，即非顶级也不是第二级节点时，才会渲染复选框。