Code Monkey home page Code Monkey logo

vue3-tree-org's Issues

拖动速度问题

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

数据不全

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

没有方法吗

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

请问支持滚动条浏览吗?

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

data

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

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

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

自定义节点插槽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 获取这个字段的时候会报错,可能是因为还没生成。

点击节点隐藏兄弟节点

大佬好,

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

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

有什么好的建议么

谢谢!

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.