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