xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

如何使用 js 实现一个树组件

tree component

const arr = [
  {
    id: 1,
    value: 1,
    level: 1,
    parentId: 0,
  },
  {
    id: 2,
    value: 2,
    level: 1,
    parentId: 0,
  },
  {
    id: 3,
    value: 3,
    level: 2,
    parentId: 1,
  },
  {
    id: 4,
    value: 4,
    level: 2,
    parentId: 1,
  },
  {
    id: 5,
    value: 5,
    level: 3,
    parentId: 2,
  },
];

const obj = {
  root: {
    id: 0,
    value: 0,
    level: 0,
    parentId: 0,
    children: null,
  },
}

const json = {
  root: {
    id: 0,
    value: 0,
    level: 0,
    parentId: 0,
    children: [
      {
        id: 1,
        value: 1,
        level: 1,
        parentId: 1,
        children: [
          {
            id: 3,
            value: 3,
            level: 2,
            parentId: 2,
            children: [
              {
                id: 5,
                value: 5,
                level: 3,
                parentId: 2,
                children: null,
              },
            ],
          },
          {
            id: 4,
            value: 4,
            level: 2,
            parentId: 2,
            children: null,
          },
        ],
      },
      {
        id: 2,
        value: 2,
        level: 1,
        parentId: 1,
        children: null,
      },
    ]
  }
}


const tree = {
  "root": {
    "id": null,
    "title": "root",
    "expanded": true,
    "folder": true,
    "selected": false,
    "children": [
        {
            "id": null,
            "title": "backend-publish/libs/layui-src/images/face/54.gif",
            "expanded": true,
            "folder": false,
            "selected": false,
            "children": null
        },
        {
          "id": null,
          "title": "backend-publish/libs/layui-src/images/face/54.gif",
          "expanded": true,
          "folder": false,
          "selected": false,
          "children": null
      },
    ],
  },
}

JSON.stringify

JSON.stringify(value[, replacer[, space]])

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

const log = console.log;

const obj = {
  a: "a",
  b: {
    c: "c",
    d: {
      e: "e",
      f: {
        g: "g",
        h: {
          i: "i",
        },
      },
    },
  },
};
// ✅ OK
log(`obj nested =
`, JSON.stringify(obj, null, 2));
// log(`obj nested =
`, JSON.stringify(obj, null, 4));
// ❌ 隐藏 bug
// log(`obj nested =
`, JSON.parse(JSON.stringify(obj)));

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---