vue项目使用vue2-org-tree

最新推荐文章于 2024-07-04 14:10:43 发布

皮卡丘-杰尼龟

最新推荐文章于 2024-07-04 14:10:43 发布

阅读量1k

点赞数 5

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_46328739/article/details/136261281

版权

本文介绍了如何在Vue项目中安装和使用`vue2-org-tree`插件创建一个可折叠的组织树结构，展示了组件的引入方式、数据绑定以及自定义渲染内容的方法。

摘要由CSDN通过智能技术生成

在这里插入图片描述

实现方式

安装依赖

npm i vue2-org-tree

使用的vue页面引入


<template>
  <div class="container">
  

    <div class="oTree" >
      <vue2-org-tree name="test"
                     :data="data"
                     :horizontal="horizontal"
                     :collapsable="collapsable"
                     :render-content="renderContent"  
                     :label-class-name="renderLabelClass"
                     @on-expand="onExpand"
                     @on-node-click="handleNodeClick" />
    </div>
  </div>
</template>

<script>
import Vue2OrgTree from 'vue2-org-tree' 
export default {
  components: {Vue2OrgTree},
  data () {
    return {
      data: {
            id: 0,
            label: '流程1',
            name: '188.00',
            children: [
              {
                id: 1,
                label: '流程2',
                children: [
                  {
                    id: 11,
                    label: '流程3',
                    children: [
                      {
                        id: 111,
                        label: '流程4'
                      }
                    ]
                  },
                  {
                    id: 12,
                    label: '流程5',
                    children: [
                      {
                        id: 121,
                        label: '流程6'
                      }
                    ]
                  },
                  {
                    id: 13,
                    label: '流程7',
                    children: [
                      {
                        id: 131,
                        label: '流程8'
                      }
                    ]
                  },
                  {
                    id: 14,
                    label: '流程9',
                    children: [
                      {
                        id: 141,
                        label: '流程10'
                      }
                    ]
                  }
                ]
              },
              {
                id: 2,
                label: '流程11',
                children: [
                  {
                    id: 21,
                    label: '流程12',
                    children: [
                      {
                        id: 211,
                        label: '流程13'
                      },
                      {
                        id: 212,
                        label: '流程14'
                      },
                      {
                        id: 213,
                        label: '流程15'
                      },
                      {
                        id: 214,
                        label: '流程16'
                      },
                      {
                        id: 215,
                        label: '流程17'
                      },
                      {
                        id: 216,
                        label: '流程18'
                      },
                      {
                        id: 217,
                        label: '流程19'
                      },
                      {
                        id: 218,
                        label: '流程20'
                      }
                    ]
                  },
                  {
                    id: 22,
                    label: '流程21',
                    children: [
                      {
                        id: 221,
                        label: '流程22'
                      },
                      {
                        id: 222,
                        label: '流程23'
                      }
                    ]
                  }
                ]
              },
              {
                id: 3,
                label: '流程24',
                children: [
                  {
                    id: 31,
                    label: '流程25'
                  }
                ]
              },
              {
                id: 4,
                label: '流程26',
                children: [
                  {
                    id: 41,
                    label: '流程27'
                  }
                ]
              },
              {
                id: 5,
                label: '流程28',
                children: [
                  {
                    id: 51,
                    label: '流程29',
                    children: [
                      {
                        id: 511,
                        label: '流程30'
                      }
                    ]
                  },
                  {
                    id: 52,
                    label: '流程31',
                    children: [
                      {
                        id: 521,
                        label: '流程32'
                      },
                      {
                        id: 522,
                        label: '流程33'
                      },
                      {
                        id: 523,
                        label: '流程34'
                      }
                    ]
                  },
                  {
                    id: 53,
                    label: '流程35',
                    children: [
                      {
                        id: 531,
                        label: '流程36'
                      },
                      {
                        id: 532,
                        label: '流程37'
                      },
                      {
                        id: 533,
                        label: '流程38'
                      }
                    ]
                  },
                  {
                    id: 54,
                    label: '流程39'
                  },
                  {
                    id: 55,
                    label: '流程40'
                  }
                ]
              },
              {
                id: 6,
                label: '流程41',
                children: [
                  {
                    id: 61,
                    label: '流程42',
                    url: 'https://world.taobao.com/'
                  },
                  {
                    id: 62,
                    label: '流程43',
                    url: 'http://www.baidu.com'
                  },
                  {
                    id: 63,
                    label: '流程44',
                    url: 'https://www.google.com/'
                  }
                ]
              }
            ]
          },

          expandAll: false,
          horizontal: true,
          collapsable: true
    }
  },
  mounted() {
    this.toggleExpand(this.data, true)
  },
  methods:{
     renderLabelClass (node) {
      return node.label.length<16? 'companyItem': 'companyHItem'
    },
    toggleExpand(data, val) {
      if (Array.isArray(data)) {
        data.forEach((item)=> {
          this.$set(item, "expand", val);
          if (item.children) {
            this.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, "expand", val);
        if (data.children) {
          this.toggleExpand(data.children, val);
        }
      }
    },
    onExpand: function(e, data) {
      if ('expand' in data) {
        data.expand = !data.expand

        if (!data.expand && data.children) {
          console.log('kkkkkkkkkkk')
          this.collapse(data.children)
        }
      } else {
        this.$set(data, 'expand', true)
      }
    },
    collapse: function(list) {
      var _this = this
      console.log(list,'kkkkkkk')
      list.forEach(function(child) {
        console.log(child,'kkkkkkkkkk')
        if (child.expand) {
          child.expand = false
        }

        child.children && _this.collapse(child.children)
      })
    },
    handleNodeClick (e, data) {
     console.log(data)
    },
     renderContent: function (h, data) {
            console.log(data, 'kkkkk')
            return h('div', [
              h('span', data.label),
              h('br'),
              h('span', '已完成')
            ])
          },
  }
};
</script>


</style>

:render-content=“renderContent”

设置label,renderContent 函数中返回一个包含多个文本并换行显示的元素

 renderContent(h, data) {
    return h('div', {
      class: 'custom-node',  // 添加类名也可以使用:label-class-name进行添加
    }, [
      h('span', data.label),
      h('br'),
      h('span', '已完成'),
    ]);
},