ztree 数据格式及其配置

ztree的数据格式可以有两种

一、children层级

如下：

[{
    name: "企业基本信息",
    parentId: "0",
    id: "04",
    children: [
      {
        name: "minsfasf信息",
        parentId: "04",
        id: "040",
      },
    ],
  }]

二、pId平级

{
    name: "企业基本信息",
    parentId: "0",
    id: "04",
  },
  {
    name: "工商信息",
    parentId: "04",
    id: "040",
  },
  {
    name: "注册信息",
    parentId: "040",
    id: "0400",
  },
  {
    name: "股东信息",
    parentId: "040",
    id: "0401",
  },
  {
    name: "高管信息",
    parentId: "040",
    id: "0402",
  }

字段名称都可以修改，同时要在配置信息中做修改。

三、基本配置

setting: {
        treeId: "id", // 节点id
        view: {
          showIcon: false,
          addHoverDom: this.editEnable ? this.addHoverDom : "",
          removeHoverDom: this.editEnable ? this.removeHoverDom : "",
          selectedMulti: false,
        },
        edit: {
          enable: this.editEnable,
          showRemoveBtn: true,
          showRenameBtn: true,
          removeTitle: "删除",
          renameTitle: "重命名",
          // editNameSelectAll: true,
        },
        data: {
          key: {
            name: "name", //
            children: "children", //zTree 节点数据中保存子节点数据的属性名称。
            isParent: "isParent", //zTree 节点数据保存节点是否为父节点的属性名称。
          },
          keep: {
            parent: true,
            leaf: true,
          },
          simpleData: {
            enable: true, // 显示层级
            idKey: "id", // 唯一标识的属性名称
            pIdKey: "parentId", // 父节点唯一标识的属性名称
            // idPKey: "pId",
            rootPId: 0, // 修正根节点父节点数据
          },
        },
        callback: {
          onClick: this.zTreeOnClick,
          onRename: this.zTreeOnRename,
        },
      },

效果：

 原创作者：https://www.cnblogs.com/lyt0207/p/13533913.html