Nutritious Pumpkin Mash

    vue-diagram-tree

    1.3.4 • Public • Published

    vue-diagram-tree

    前言

    最近公司项目(Vue)需求有用到 树状结构图 ,所以呢我去网上找了很多插件,都不是很符合我的要求。 自己也根据业务需求重新做了一个插件,打包上传到了 npm,若有不妥之处请敬请指出!!

    插件安装

    npm install vue-diagram-tree -S
    

    插件使用

    <diagram-tree
      :data="data"
      :options="options"
      :others="others"
      @changeNode="changeNode"
      @clickNode="clickNode"
    ></diagram-tree>
    

    引入组件

    data(){
      data:{
        id: "1",
        name: "founder",
        title: "创始人",
        color: "#3c3fff",
        content: "pafu",
        ...
        children: [],
      },
      options:[
        {
          name: "branch",
          title: "添加分支",
          type: "branch",
          color: "#6fe44c",
          ...
        },
      ],
      others = [
        {
          name: "founder",
          title: "创始人",
          color: "#3c3fff",
          ...
        },
      ]
    },
    methods: {
      // 点击节点
      clickNode(data) {
        console.log(data);
      },
      // 数据变化
      changeNode(data) {
        this.data = data;
      },
    }
    

    clickNode 点击节点 changeNode 数据变化

    API

    diagram-tree

    属性 简介 默认值
    data 数据 (Object){id: 0,name: "sponsor",content: "pafu",children: [],}
    options 可添加的节点数据 (Array)[]
    others 仅暂时用的节点数据 (Array)[]
    disabled 是否禁用状态,默认为 false (Boolean)false
    copy 是否启用复制,默认为 false (Boolean)false

    data

    属性 简介 必填
    id 作为标记节点的唯一 id,以树状结构书写 { id:1 , children : [ {id: 2]},{id: 3,children: [{id: 4}} ]} 必填
    name 唯一标识 name
    title 树状图标题 必填
    type 类型,默认为添加直接单子节点(当type='branch',可添加多子节点)
    color 树状图标题颜色
    content 节点内容
    children 子节点

    事件

    属性 简介 回调参数
    clickNode 点击子节点 Function(data) {}
    changeNode 数据增减变化 Function(data) {}
    getCopyArr 获取复制后的新树状数据 Function(data) {}

    插槽

    属性 简介 参数
    contnent 节点内容 data.tree
    title 节点标题 data.tree

    最后附上 Git 地址:https://github.com/LairPaFu/vue-diagram-tree

    Keywords

    none

    Install

    npm i vue-diagram-tree

    DownloadsWeekly Downloads

    5

    Version

    1.3.4

    License

    ISC

    Unpacked Size

    65.3 kB

    Total Files

    14

    Last publish

    Collaborators

    • pafu