vue-ds-tree v0.1.2

vue-ds-tree

安装

npm install vue-ds-tree

使用

<template>
  <DsTree 
    :data="nodeData" 
    :defaultProps="treeProps"
    @handleCollapseClick="collapseThis"
    @handleDelete="deleteNode"
    @handleClick="setResult"
  />
</template>

<script>
import DsTree from 'vue-ds-tree';
import { treeData } from "./assets/data.js";

export default {
  name: 'App',
  components: {
    DsTree
  },
  data() {
    return{
      nodeData:treeData,
      treeProps: {
        label: "name",
        children: "children",
        uniqueKey: 'treeUniqueId',
        bName: 'branchName'
      },
    }
  },
  methods: {

  }
}
</script>

数据示例

{
    "name": "分支",
    "branchName": null,
    "treeUniqueId": "v4on3kigbb7nm006wxpbt2d1q4ygj0xw",
    "children": [
      {
        "name": "a1",
        "branchName": null,
        "treeUniqueId": "dlv09rnevdb9rqsqbdqkif4kv7eb5men",
        "children": [
          {
            "name": "q1",
            "branchName": "q1_分支",
            "treeUniqueId": "ikeiv6x2h8lmov24828pwgoni8pcq3bl",
            "children": [
              {
                "name": "m1",
                "branchName": null,
                "treeUniqueId": "rzn8570s0432ozqvkqsmam32x9ffkv3q",
                "color": "rgb(255, 250, 239)",
                "children": [],
              },
              {
                "name": "m2",
                "branchName": null,
                "treeUniqueId": "kdpfgrp6kgip7p05mr9sbni7t74gy96m",
                "children": [],
              }
            ]
          },
          {
            "name": "q2",
            "branchName": null,
            "treeUniqueId": "72i7dh4eroi57xr0t80lrbm5brwipfzi",
            "color": "rgb(239, 239, 255)",
            "children": [],
          },
          {
            "name": "q3",
            "branchName": null,
            "treeUniqueId": "t4tua70g73lej67oj9v07un1d72tz38h",
            "color": "rgb(239, 239, 255)",
            "children": [],
          }
        ],
      },
      {
        "name": "a2",
        "branchName": 'a2_分支',
        "treeUniqueId": "gltz4nrnld6tb4pm2bvpke8p8yv4y2la",
        "children": [],
      },
      {
        "name": "a3",
        "branchName": "a2_分支",
        "treeUniqueId": "tgrsxn3gl025rsvt79slm9xsva9z6lch",
        "children": [
          {
            "name": "r1",
            "branchName": null,
            "treeUniqueId": "g0s8gjzb3y5m171rsilnj3ek96ccl0qd",
            "color": "rgb(255, 250, 239)",
            "children": [],
          },
          {
            "name": "r2",
            "branchName": null,
            "treeUniqueId": "iczfoak561awqv1skhzdksa5djsg148k",
            "children": [],
          }
        ],

      },
      {
        "name": "a4",
        "branchName": "a4_分支",
        "treeUniqueId": "hk7yz79vv3uw2slrdx6ezs9fimje6ibq",
        "children": [
          {
            "name": "s1",
            "branchName": null,
            "treeUniqueId": "ova6kf13bv549w2mbtw1ctd9y11oni7v",
            "children": [],
          },
          {
            "name": "s2",
            "branchName": null,
            "treeUniqueId": "ova6kf13bv549w2mbtw1ctd9y11oni8v",
            "children": [],
          },
          {
            "name": "s3",
            "branchName": null,
            "treeUniqueId": "ova6kf13bv549w2mbtw1ctd9y11oni9v",
            "children": [],
          },
          {
            "name": "s4",
            "branchName": null,
            "treeUniqueId": "ova6kf13bv549w2mbtw1ctd9y11oni10v",
            "children": [],
          },
          {
            "name": "s5",
            "branchName": null,
            "treeUniqueId": "j0uugkijkzj4or1ctkxn7nystds2l86g",
            "children": [
              {
                "name": "x1",
                "branchName": "x1",
                "treeUniqueId": "hk7yz79vv3uw2slrdx6ezs9fimje6ibq",
                "children":[
                  {
                    "name": "y1",
                    "branchName": "null",
                    "treeUniqueId": "hk7yz79vv3uw2slrdx6ezs9fimje6ibq",
                    "children":[]
                  }
                ]
              }
            ],
          }
        ]
      }
    ]
  }