<el-tree
ref="treeRef"
:data="dataSource"
show-checkbox
node-key="encryptPermissionId"
default-expand-all
:props="defaultProps"
:default-checked-keys="arrStr"
:render-content="renderContent"
>
<template #default="{ node }">
<span class="custom-tree-node">
<span>{{ node.label }}</span>
</span>
</template>
</el-tree>
import type Node from "element-plus/es/components/tree/src/model/node";
interface Tree {
id: number;
label: string;
name?: string;
checked: boolean;
editable: string | null;
children?: Tree[];
}
const defaultProps = {
children: "children",
label: "name",
value: "encryptPermissionId",
};
// 根据editable属性值判断是否渲染节点
const renderContent = (
h: any,
{
node,
data,
}: {
node: Node;
data: Tree;
}
) => {
if (data.editable !== "N") {
return <span>{data.name}</span>;
} else {
remove(node, data);
}
};
// 删除节点数据方法
const remove = (node: any, data: any) => {
const parent = node.parent;
const children = parent.data.children || parent.data;
const index = children.findIndex(
(d: any) => d.encryptPermissionId === data.encryptPermissionId
);
children.splice(index, 1);
};
06-18
1万+
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)