利用vue-okr-tree实现飞书OKR对齐视图

已于 2023-12-14 15:50:37 修改
阅读量1.2k 收藏 1
点赞数 2
文章标签： vue.js r-tree 飞书
于 2023-12-14 15:47:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45629145/article/details/134997284
版权

vue-okr-tree-demo

因开发需求需要做一个类似飞书OKR对齐视图的功能，参考了两位大神的代码：

开源组件vue-okr-tree作者博客地址：http://t.csdnimg.cn/5gNfd
对组件二次封装的作者博客地址：http://t.csdnimg.cn/Tjaf0

开源组件vue-okr-tree Demo 演示地址：http://www.longstudy.club/vue-okr-tree-doc/index.html

github 地址：https://github.com/qq449245884/vue-okr-tree
飞书OKR DEMO：https://okr.feishu.cn/demo/alignment
在这里插入图片描述

需要的可以拉到本地，实际看一下效果。
https://github.com/ileyfung/vue-okr-tree-demo
https://gitee.com/leyfung/vue-okr-tree-demo
在这里插入图片描述

@小匠
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2组织机构数vue-okr-tree
qq_41742961的博客
03-29 1837
<template> <el-card> <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input> <el-tree ref="tree" :data="treeData" :props="defaultProps" default-exp
vue-okr-tree组件，组织架构树
我还起舞了的博客
07-21 1346
1、下载、引用2、使用。
vue使用vue-okr-tree实现组织架构树组件
lixinhua_man的博客
07-28 3947
vue-okr-tree
好用的基于vue的组织架构图组件
可可爱爱的你吖的博客
01-11 3868
都是基于vue的组织架构图，有支持vue2.x和vue3.x,可自行选择使用
推荐一款创新的Vue组件库：Vue-OKR-Tree
最新发布
gitblog_00011的博客
04-15 711
推荐一款创新的Vue组件库：Vue-OKR-Tree 项目地址:https://gitcode.com/husky-dot/vue-okr-tree 项目简介 Vue-OKR-Tree 是一个基于 Vue.js 的目标与关键结果（Objectives and Key Results）树形结构组件。它专为管理企业级OKR流程而设计，可以帮助团队清晰地展示和跟踪他们的目标和进度，提升组织效率。 技术分...
vue-okr-tree:http
03-19
更新日志 更新时间2020/12/02修复初步修改数据不渲染问题对应版本：vue-okr-tree@1.0.5 更新时间2020/12/05修改部分展示bug对应版本：vue-okr-tree@1.0.6 更新时间2021/01/13增加updateKeyChildren方法：vue-okr-tree@1.0.7 更新时间2021/02/03增加node-btn-content属性，对展开圆圈内容自定义处理vue-okr-tree@1.0.8 更新时间2021/02/04增加showNodeNum属性显示子节点数vue-okr-tree@1.0.9 文档和事例 地址： : Vue-Okr-树 基于Vue 2的组织架构树组件 安装 # use npm npm i vue-okr-tree # use yarn yarn add vue-okr-tree 快速开始 import { Vu
vue-okr-tree 组件左右树结构
贵林之恋的博客
02-18 6862
最近公司需要做一个okr项目，okr项目里有一个对齐试图功能，在百度和GitHub上找了半天，最后终于找到了一位大神造的轮子，可能最终需求不是这个样子，但是也特别感谢大神的指导，希望大家多多支持大神，互相学习。 大神的博客：https://blog.csdn.net/qq449245884/article/details/109568825 大神的GitHub：https://github.com/qq449245884/vue-okr-tree 最终的展示效果如图： 子组件： &lt.
vue-tree:Vue Vue树Vue复选框树
05-11
v-tree Usage 1.npm install 下载依赖项 2.npm install vue-tree-jf --save 下载vue-tree-jf组件 import vueTree from 'vue-tree-jf' Vue.use(vueTree); ..... 初始化参数 参数 类型 默认值 描述 treeData Array 数据源，包含'id','text','icon','children'属性。示例：[ {text:'xiaoming', id:'1', icon:'folder', children:[
Vue组织架构树图组件vue-org-tree的使用
热门推荐
芸灵fly的博客
01-17 4万+
说明 最近需要作出一个组织架构图来可视化展示一下，最后找到vue-org-tree这个组件，觉得效果还不错~，可选节点颜色、横向/纵向展开、打开/收起，在这记录一下使用方法，效果图如下： 快速开始 安装 npm install --save-dev less less-loader npm install --save-dev vue2-org-tree （可能还需要安装其他组件，...
使用vue-table-tree-grid实现多级表格复杂效果
weixin_57792333的博客
09-16 3042
在写 后台电商管理 的vue项目时, 要实现如下 复杂的表格效果 这时还用 element-ui中的table 组件实现 这类效果就很麻烦 github 某作者 提供了 vue-table-width-tree-grid 第三方包 可以帮我们很快的实现 此类效果 github 地址 https://github.com/MisterTaki/vue-table-with-tree-grid 先 安装 在我们的项目中 //在 git中 执行 npm i vue-table-with-tree-gr.
Vue代码示例，左边Tree，右边对Tree节点配置子表多条数据
04-21
Vue代码示例，左边Tree，右边对Tree节点配置子表多条数据，列表显示，子表可增删改查。并附上后端Controller.java
vued3treeVUE实现自定义节点的树结构
08-09
vued3treeVUE实现自定义节点的树结构
vue3-blocks-tree:vue3块组织树视图组件。 分层的水平或垂直树
04-29
vue3块树 基于Vue3.x的简单组织结构树视图。 它支持事件，时段，水平视觉和节点操纵 感谢和他以vue 2为基础的资料。 用法 < template> < h1>Basic</ h1> < div> < blocks xss=removed xss=removed xss=removed xss=removed></ blocks> </ div> < h1>With slots</ h1> < div> < blocks-tree : data = " treeData " : horizontal = " treeOrientation == ' 1 ' " : collapsable
OpenOKR:开源OKR管理软件
04-28
打开OKR 开源OKR管理软件 介绍 OpenOKR旨在解决从创业到公司的多管理问题。 建立战略与执行之间的一致性 浮现您的主要目标，他们引导工作和协调。 确保公司将精力集中在整个组织的相同重要问题上 支持自上而下和自下而上的OKR设置过程 贡献者 这些人为OpenOKR的设计和实施做出了贡献： 名称 角色 项目负责人 陈益宏 用户体验设计师 刘永兵 前端工程师 技术主管 后端工程师 质量检查工程师 执照 此项目已获得GNU GPL 3.0许可证的许可-有关详细信息，请参阅文件。
react-okr-ui:用于构建OKR应用程序的开源ReactJS组件
05-23
标题 路线 自述文件 / ReactOKR UI 一个用于构建OKR应用程序的React用户界面工具包。 文档和示例 文档和游乐场示例可以在找到。 入门 入门很容易。 只需通过npm安装该软件包： npm install react-okr-ui 安装后，将所需的组件导入到React应用程序中： import { Okr , Objective , Result , Goal } from "react-okr-ui" ; 要查看所有正在使用的组件，请在查看操场
我开源了一个基于Vue的组织架构树组件
粉丝们务必加入微信粉丝群
11-09 3180
点赞再看，养成习惯 本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。 大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。 开门见山 Demo 演示地址：http://www.longstudy.club/vue-okr-tree-doc/index.html github 地址：https://gith.
html组织架构插件,jQuery组织架构图插件okrTree.js
weixin_31908827的博客
06-30 1177
插件描述：jQuery组织架构图支持拖拽节点,支持插入标记节点，分支节点更新时间：2021-03-0223:52:07更新说明：1. 修改默认主题，2. 添加自定义主题接口vars=$("#orgTree").OkrTree({data:json,//数据源is:true,//是否支持拖拽css:{lineColor:"black",background:"#fff"},t...
我开源了一个基于Vue的组织架构树组件，web前端开发就业
2401_84187537的博客
04-08 1084
可自行设置节点内容。通过渲染节点内容。与上常规 Tree 一样，我们也可以通过自定义渲染函数来制定节点的内容。通过渲染节点内容，通过返回 node 中的判断是否是左边的树。
目标调整：如何成功对齐OKR
Tita OKR
05-25 472
OKR目标设定方法的最大好处之一是，它提供了整个公司的战略目标一致性；它可以使高管人员一直到各个团队都保持一致。许多公司选择实施OKRs，是因为他们希望公司的不同团队能够与公司的整体方向更加一致。 但是，如果人们不知道它应该如何运作，以及这个过程是什么样子的，那么调整就很容易出问题。这不仅仅是让目标以某种方式相互联系。OKR调整深深地扎根于目标设定过程中，并且需要一种创造良好OKR的心态。 在你开始调整整个组织的OKRs之前，你需要花时间让每个人都加入到新的方法论中。 如果你正处于制定OKRs的第一个季度，
vue3 使用 vue-okr-tree
05-12
Vue-OKR-Tree 是一个基于 Vue3 和 Element Plus 的树形组织结构图组件。使用 Vue-OKR-Tree 可以轻松地实现树形结构的展示和操作，同时还支持拖拽和可编辑等功能。 要使用 Vue-OKR-Tree，需要先安装 Element Plus 和 Vue-OKR-Tree 两个依赖，可以通过以下命令进行安装： ``` npm install element-plus vue-okr-tree ``` 安装完成后，在 Vue 的入口文件中引入 Element Plus 和 Vue-OKR-Tree： ```javascript import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import VueOkrTree from 'vue-okr-tree' import App from './App.vue' createApp(App) .use(ElementPlus) .use(VueOkrTree) .mount('#app') ``` 在组件中使用 Vue-OKR-Tree 如下所示： ```html <template> <vue-okr-tree :data="data" :options="options"></vue-okr-tree> </template> <script> export default { data() { return { data: [ { label: '节点1', children: [ { label: '节点1-1' }, { label: '节点1-2' } ]}, { label: '节点2', children: [ { label: '节点2-1' }, { label: '节点2-2' } ]} ], options: { // 可以在这里配置组件的各种选项 } } } } </script> ``` 除了以上基本用法外，Vue-OKR-Tree 还支持一些高级用法，比如自定义节点模板、异步加载数据等。具体的使用方法可以参考官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值