Code Monkey home page Code Monkey logo

vue3-tree-org's People

Contributors

sangtian152 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

vue3-tree-org's Issues

拖动速度问题

放大的时候 拖动速度变快了 缩小的时候拖动速度就很慢了

点击节点隐藏兄弟节点

大佬好,

想实现点击某个节点,在该节点的click事件处理中,实现隐藏该节点兄弟节点及兄弟节点的所有子节点,然后再次点击该节点的父节点能够正常打开子级节点。

如下图
image
点击_金融_节点把_实货_节点全部隐藏,再次点击_业务风险报表_,能正常显示_实货_和_金融_节点

有什么好的建议么

谢谢!

没有方法吗

没有api方法添加删除,对节点进行操作吗?

自定义节点如何拖拽?组件的拖拽功能不是用的h5的api吗?

你好,自定义节点如何拖拽?我这边需要自定义拖拽的行为,用于支持拖拽排序。
目前来说使用自定义节点,拖拽的时候,显示不出那个虚影,然后组件本身的拖拽功能是基于什么实现的?简单看了下当前组件的div上没见有使用draggable="true"。

数据不全

自定义节点时,取不到完整节点数据

data

data如何自定义数据(附加数据)

自定义节点插槽node传过来的数据有两层

自定义节点插槽node传过来的数据有两层,其中$$data中的数据才是我想要的。
附上我的原始数据

{
          "orgType": 1,
            "priority": 99,
            "id": 1,
            "logo": "https://bitpig-column.oss-cn-hangzhou.aliyuncs.com/AA12/132366555236270081.jpg",
            "name": "集团有限公司",
            "label":"集团有限公司",
            "shortName": "集团",
            "parentName": "集团有限公司",
            "director": "陆鑫",
            "children": [
                {
                    "orgType": 1,
                    "priority": 98,
                    "id": 2,
                    "pid": 1,
                    "logo": "https://bitpig-column.oss-cn-hangzhou.aliyuncs.com/AA12/132366555236270081.jpg",
                    "name": "信息技术中心",
                    "label": "信息技术中心",
                    "shortName": "信息技术",
                    "parentName": "集团有限公司",
                    "director": "路逸",
                    "children": [
                        {
                            "priority": 5,
                            "id": 7,
                            "pid": 2,
                            "logo": "http://url",
                            "name": "产品研发部",
                            "label" : "产品研发部",
                            "parentName": "信息技术中心",
                            "director": "陆鑫",
                            "children": [
                                {
                                "priority": 5,
                                "id": 7,
                                "pid": 7,
                                "logo": "http://url",
                                "name": "后端",
                                "label" : "后端",
                                "parentName": "信息技术中心",
                                "director": "陆鑫",
                                }
                            ]
                        },
}

然后通过自定义节点插槽的代码

<vue3-tree-org
        :data="data"
        :collapsable="collapsable"
        :label-style="style"
        :clone-node-drag="cloneNodeDrag"
        :horizontal="horizontal"
        :disabled="disabled"
        :scalable="scalable"
        expand="true"
        @on-node-click="nodeClick"
        @on-contextmenu="onMenus"
        >
        <template #default="{ node }" >
                <div class="flex tree-org-node__text node-label">
                    <img :src="node.logo" alt="" class="custom-content w-6 h-6">
                    <div>{{node.label}}</div>
                    <div>{{ node.$$data.logo }}</div>
                </div>
          </template>
    </vue3-tree-org>

以下是插槽node的数据,有两层。其中$$data中的才是我想要的数据,该怎么解决?

{
    "id":1,
    "label":"集团有限公司",
    "expand":false,
    "children":Array[5],
    "$$level":0,
    "$$data":{
        "orgType":1,
        "priority":99,
        "id":1,
        "logo":"https://bitpig-column.oss-cn-hangzhou.aliyuncs.com/AA12/132366555236270081.jpg",
        "name":"集团有限公司",
        "label":"集团有限公司",
        "shortName":"集团",
        "parentName":"集团有限公司",
        "director":"陆鑫",
        "children":Array[5]
    },
    "$$focused":false,
    "$$root":true
}

而通过node.$$data.logo 获取这个字段的时候会报错,可能是因为还没生成。

ts下局部使用组件data为undefined

版本:"vue3-tree-org": "^4.2.2",
vue3内使用局部组件
image
目前改成了这种形式就没有问题
import "vue3-tree-org/lib/vue3-tree-org.css";
import Vue3TreeOrg2 from 'vue3-tree-org';
const Vue3TreeOrg = Vue3TreeOrg2.Vue3TreeOrg;

请问支持滚动条浏览吗?

当一个节点非常多的树结构进行竖直显示的时候,我怎样能够让它能够通过滚动条进行浏览而不是通过拖动的方式?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.