create-tree-simple v0.0.10

create-tree-simple

创建连线树

下载该组件

npm install create-tree-simple

组件的使用

在main.js里引用该组件

import CreateTree from "create-tree-simple";

Vue.use(CreateTree);

使用组件

<template>
  <Tree :pd="pd" :icon="'iconwenjian'" @itemClick="itemClick"></Tree>
</template>

<!-- 数据格式 -->
data() {
    return {
      pd: [
            {
              label: "第一层(1)",
              children: []
            },
            {
              label: "第一层(2)",
              children: [
                  {
                    label: "第二层(1)",
                    children: []
                  },
                  {
                  label: "第二层(2)",
                  children: [
                      {
                        label: "第三层(1)",
                        children: [
                            {
                              label: "第四层",
                              children: [
                                  {
                                    label: "第五层",
                                    children: [{ label: "第六层", children: [] }]
                                  }
                            ]
                            }
                      ]
                    },
                    {
                      label: "第三层(2)"
                    },
                    {
                      label: "第三层(3)",
                      children: []
                    }
                ]
                },
                {
                  label: "第二层(3)",
                  children: []
                },
                {
                  label: "第二层(4)",
                  children: []
                }
              ]
            },
            {
              label: "第一层(3)",
              children: []
            },
            {
              label: "第一层(4)",
              children: []
            },
            {
              label: "第一层(5)",
              children: []
            }
        ],
    }
  }



const store = new Vuex.Store({
  state: {
    activeItem: ''
  },
  mutations: {
    changeactiveItem(state, lable) {
      state.activeItem = lable
    }
  }
})