element-ui-plus el-tree 树形结构如何自定义内容

本文提及的 elementUI 版本 为 elementUI Plus 版本

一、需求

项目中遇到一个需要设置权限的地方，但目录和权限是放在一起的，这样就很不好区分类别，为了区分类别，就需要自定义树结构中每项的外观。

二、实现它

el-tree 自定义节点内容

查看官方文档中有两种方式

• 一种是添加 render-content 方法，
• 一种是使用模板的方式 <template>

这里我们使用第二种方式实现，感觉更好看一些，官方那个 render-content 的方法写的很*一样，不是人类看的。

原来是这样

<el-tree
    ref="refTree"
    node-key="id"
    :default-expand-all="true"
    :data="roleTreeData"
    :default-checked-keys="formRolePermission.ids"
    :props="{ label: 'name', children: 'children' }"
    show-checkbox
/>

现在使用 template

内容包含 TypeScript 内容 Enum

<el-tree
    ref="refTree"
    node-key="id"
    :default-expand-all="true"
    :data="roleTreeData"
    :default-checked-keys="formRolePermission.ids"
    :props="{ label: 'name', children: 'children' }"
    show-checkbox
>
    <template #default="{ node, data }">
        <div class="custom-tree-node">
            <el-tag size="small" type="primary" v-if="data.type === EnumMenuType.菜单">{{EnumMenuType[data.type]}}</el-tag>
            <el-tag size="small" type="warning" v-if="data.type === EnumMenuType.目录">{{EnumMenuType[data.type]}}</el-tag>
            <el-tag size="small" type="success" v-if="data.type === EnumMenuType.按钮">{{EnumMenuType[data.type]}}</el-tag>
            <span class="pl-1">{{data.name}}</span>
        </div>
    </template>
</el-tree>

三、结果

这样就相当明了了。