vue3-tree-org 组织结构图

官方文档: vue3-tree-orghttps://sangtian152.github.io/vue3-tree-org/

可以进行新增/编辑/拖拽等. 相关事件可以查看官方文档

命令安装: npm i vue3-tree-org -S / yarn add vue3-tree-org

// 在main.js中引入import { createApp } from 'vue'
import vue3TreeOrg from 'vue3-tree-org'
import 'vue3-tree-org/lib/vue3-tree-org.css'app.use(vue3TreeOrg)

<template><div style="height: 400px;"><vue3-tree-org:data="data":horizontal="horizontal":collapsable="collapsable":label-style="style":node-draggable="true":scalable="false":only-one-node="onlyOneNode":default-expand-level="1":clone-node-drag="cloneNodeDrag"@on-contextmenu="onMenus"@on-node-click="onNodeClick"><!-- 自定义节点内容 --><template v-slot="{node}"><div class="tree-org-node__text node-label"><div class="custom-content">自定义内容</div><div>节点名称：{{node.label}}</div></div></template><!-- 自定义展开按钮 --><template v-slot:expand="{node}"><div>{{node.children.length}}</div></template></vue3-tree-org></div>
</template>
<script>
export default {name: "slotTree",data() {return {data: {"id":1,"label":"xxx科技有限公司","children":[{"id":2,"pid":1,"label":"产品研发部","style":{"color":"#fff","background":"#108ffe"},"children":[{"id":6,"pid":2,"label":"禁止编辑节点","disabled":true},{"id":8,"pid":2,"label":"禁止拖拽节点","noDragging":true},{"id":10,"pid":2,"label":"测试"}]},{"id":3,"pid":1,"label":"客服部","children":[{"id":11,"pid":3,"label":"客服一部"},{"id":12,"pid":3,"label":"客服二部"}]},{"id":4,"pid":1,"label":"业务部"}]},horizontal: false,collapsable: true,onlyOneNode: true,cloneNodeDrag: true,expandAll: true,style: {background: "#fff",color: "#5e6d82",},};},methods: {onMenus({ node, command }) {console.log(node, command);},onNodeClick(e, data) {this.$Message.info(data.label);},expandChange() {this.toggleExpand(this.data, this.expandAll);},},
};
</script>
<style lang="scss" scoped>
.tree-org-node__text {text-align: left;font-size: 14px;.custom-content {padding-bottom: 8px;margin-bottom: 8px;border-bottom: 1px solid currentColor;}
}
</style>

vue3-tree-org 组织结构图相关推荐

小满vue3笔记（含源码解读）
第一章 1.mvvm架构 2.回顾vue2对比vue3 区别: vue2选项式api vue3组合式api 关于这两个的区别,你可以不准确的理解为,选项式api更贴近原生标准html文件结构: 而组合 ...
SQLite内部机制和新特性
SQLite内部机制和新特性一.B-tree和Pager模块 B-tree为SQLite VDBE提供了O(logN)级时间复杂度的插入和查询,通过双向遍历记录实现O(1)级时间复杂度的删除.B-t ...
「2022」字节-前端（互娱）笔试题
1.对数组原生方法的使用 ① 题目 : ② 参考答案 : const arr1 = [10,9,8,7,6,5,4,3,2,1] arr1.splice(2,1);const arr2 = [10, ...
用vscode实现vue.js项目的一个完整过程
1.新建项目打开Visual studio code 打开一个你想要创建项目的文件夹打开集成终端:查看 –> 集成终端或者直接按 ctrl+` 如果没有安装vue-cli,在终端输入: n ...
vue3中tree shaking特性
Treeshaking是一种通过清除多余代码方式来优化项目打包体积的技术专业术语叫 Dead code elimination 简单来讲,就是在保持代码运行结果不变的前提下,去除无用的代码如何做到 ...
【vue3】设置element-tree的选中效果focus，鼠标飘过hover和利用按钮触发this.$refs[“tree“].setCurrentKey进行选中的样式
参考: vue elementUI 覆盖el-tree的样式,修改鼠标点击时的颜色以及节点失去焦点时的背景色(亲测有效) element el-tree 树图颜色配置 element-ui tree树 ...
VUE3.0 二. vue-cli3 配置指南
VUE3.0 二. vue-cli3配置指南一.vue.config.js 详解官网地址: https://cli.vuejs.org/zh/config/ 使用vue3 的时候需要添加一个vue ...
Vue3.0 组合式 API 分析与实践
本文带大家深入理解组合式 API 的设计详情,同时加入我们的实践经验总结. 01 背景 Vue3.x 版本的出现带来了许多令人眼前一亮的新特性,其中组合式 API(Composition API),一 ...
记一次 Vue2 迁移 Vue3 的实践总结
大家好,我是若川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
vue-cli 将被 create-vue 替代？初始化基于 vite 的 vue3 项目为何如此简单？
大家好,我是若川.最近组织了源码共读活动<1个月,200+人,一起读了4周源码>,已经有超50+人提交了笔记,群里已经有超1500人,感兴趣的可以点此链接扫码加我微信 ruochuan12 ...

vue3-tree-org 组织结构图

vue3-tree-org 组织结构图相关推荐

最新文章

热门文章