tree 初始化过滤

  <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);
};

你可能感兴趣的:(javascript,前端,html)