vue 组织树学习笔记

最新推荐文章于 2024-04-22 19:26:15 发布
最新推荐文章于 2024-04-22 19:26:15 发布
阅读量756 收藏 5
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38388578/article/details/114528074
版权

1、v-org-tree

1-1、安装

cnpm install v-org-tree --save
cnpm install v-click-outside-x --save

1-2、注册

//main.js
import OrgTree from 'v-org-tree'
import 'v-org-tree/dist/v-org-tree.css'
Vue.use(OrgTree)

import { directive as clickOutside } from 'v-click-outside-x'
Vue.directive('clickOutside', clickOutside)

//下拉框用iview
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
Vue.use(ViewUI);

1-3、使用

HTML

<template>
  <div class="view-box">
    <div
      ref="dragWrapper"
      class="org-tree-drag-wrapper"
      @mousedown="mousedownView"
      @contextmenu="handleDocumentContextmenu"
    >
      <div class="org-tree-wrapper" :style="orgTreeStyle">
        <v-org-tree
          v-if="data"
          :data="data"
          :node-render="nodeRender"
          :expand-all="true"
          @on-node-click="handleNodeClick"
          collapsable
        ></v-org-tree>
      </div>
    </div>
  </div>
</template>

JS

<script>
import { on, off } from "@/utils/tools";
const menuList = [
  {
    key: "edit",
    label: "编辑部门",
  },
  {
    key: "detail",
    label: "查看部门",
  },
  {
    key: "new",
    label: "新增子部门",
  },
  {
    key: "delete",
    label: "删除部门",
  },
];
export default {
  name: "OrgView",
  data() {
    return {
      data: {
        id: 0,
        label: "XXX科技有限公司",
        children: [
          {
            id: 2,
            label: "产品研发部",
            children: [
              {
                id: 5,
                label: "研发-前端",
              },
              {
                id: 6,
                label: "研发-后端",
              },
              {
                id: 9,
                label: "UI设计",
              },
              {
                id: 10,
                label: "产品经理",
              },
            ],
          },
          {
            id: 3,
            label: "销售部",
            children: [
              {
                id: 7,
                label: "销售一部",
              },
              {
                id: 8,
                label: "销售二部",
              },
            ],
          },
          {
            id: 4,
            label: "财务部",
          },
          {
            id: 11,
            label: "HR人事",
          },
        ],
      },
      currentContextMenuId: "",
      orgTreeOffsetLeft: 0,
      orgTreeOffsetTop: 0,
      initPageX: 0,
      initPageY: 0,
      oldMarginLeft: 0,
      oldMarginTop: 0,
      canMove: false,
    };
  },
  computed: {
    orgTreeStyle() {
      return {
        transform: `translate(-50%, -50%) scale(${this.zoomHandled}, ${this.zoomHandled})`,
        marginLeft: `${this.orgTreeOffsetLeft}px`,
        marginTop: `${this.orgTreeOffsetTop}px`,
      };
    },
  },
  methods: {
    handleNodeClick(e, data, expand) {
      expand();
    },
    closeMenu() {
      this.currentContextMenuId = "";
    },
    getBgColor(data) {
      return this.currentContextMenuId === data.id
        ? data.isRoot
          ? "#0d7fe8"
          : "#5d6c7b"
        : "";
    },
    nodeRender(h, data) {
      return (
        <div
          class={[
            "custom-org-node",
            data.children && data.children.length ? "has-children-label" : "",
          ]}
          on-mousedown={(event) => event.stopPropagation()}
          on-contextmenu={this.contextmenu.bind(this, data)}
        >
          {data.label}
          <dropdown
            trigger="custom"
            class="context-menu"
            visible={this.currentContextMenuId === data.id}
            nativeOn-click={this.handleDropdownClick}
            on-on-click={this.handleContextMenuClick.bind(this, data)}
            style={{
              transform: `scale(${1 / this.zoomHandled}, ${
                1 / this.zoomHandled
              })`,
            }}
            v-click-outside={this.closeMenu}
          >
            <dropdown-menu slot="list">
              {menuList.map((item) => {
                return (
                  <dropdown-item name={item.key}>{item.label}</dropdown-item>
                );
              })}
            </dropdown-menu>
          </dropdown>
        </div>
      );
    },
    contextmenu(data, $event) {
      let event = $event || window.event;
      event.preventDefault
        ? event.preventDefault()
        : (event.returnValue = false);
      this.currentContextMenuId = data.id;
    },
    setDepartmentData(data) {
      data.isRoot = true;
      this.departmentData = data;
    },
    mousedownView(event) {
      this.canMove = true;
      this.initPageX = event.pageX;
      this.initPageY = event.pageY;
      this.oldMarginLeft = this.orgTreeOffsetLeft;
      this.oldMarginTop = this.orgTreeOffsetTop;
      on(document, "mousemove", this.mousemoveView);
      on(document, "mouseup", this.mouseupView);
    },
    mousemoveView(event) {
      if (!this.canMove) return;
      const { pageX, pageY } = event;
      this.orgTreeOffsetLeft = this.oldMarginLeft + pageX - this.initPageX;
      this.orgTreeOffsetTop = this.oldMarginTop + pageY - this.initPageY;
    },
    mouseupView() {
      this.canMove = false;
      off(document, "mousemove", this.mousemoveView);
      off(document, "mouseup", this.mouseupView);
    },
    handleDropdownClick(event) {
      event.stopPropagation();
    },
    handleDocumentContextmenu() {
      this.canMove = false;
    },
    handleContextMenuClick(data, key) {
      console.log(data,key,'点击节点')
    },
  },
  mounted() {
    on(document, "contextmenu", this.handleDocumentContextmenu);
  },
  beforeDestroy() {
    off(document, "contextmenu", this.handleDocumentContextmenu);
  },
};
</script>

Css

<style scoped lang='scss'>
.view-box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  cursor: move;
  .org-tree-drag-wrapper {
    width: 100%;
    height: 100%;
  }
  .org-tree-wrapper {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 20%;
    transition: transform 0.2s ease-out;
    .org-tree-node-label {
      box-shadow: 0px 2px 12px 0px rgba(143, 154, 165, 0.4);
      border-radius: 4px;
      .org-tree-node-label-inner {
        padding: 0;
        .custom-org-node {
          padding: 14px 41px;
          background: #738699;
          user-select: none;
          word-wrap: none;
          white-space: nowrap;
          border-radius: 4px;
          color: #ffffff;
          font-size: 14px;
          font-weight: 500;
          line-height: 20px;
          transition: background 0.1s ease-in;
          cursor: default;
          &:hover {
            background: #5d6c7b;
            transition: background 0.1s ease-in;
          }
          &.has-children-label {
            cursor: pointer;
          }
          .context-menu {
            position: absolute;
            right: -10px;
            bottom: 20px;
            z-index: 10;
          }
        }
      }
    }
  }
}
</style>

tools.js

/**
 * @description 绑定事件 on(element, event, handler)
 */
export const on = (function () {
    if (document.addEventListener) {
      return function (element, event, handler) {
        if (element && event && handler) {
          element.addEventListener(event, handler, false)
        }
      }
    } else {
      return function (element, event, handler) {
        if (element && event && handler) {
          element.attachEvent('on' + event, handler)
        }
      }
    }
  })()
  
  /**
   * @description 解绑事件 off(element, event, handler)
   */
  export const off = (function () {
    if (document.removeEventListener) {
      return function (element, event, handler) {
        if (element && event) {
          element.removeEventListener(event, handler, false)
        }
      }
    } else {
      return function (element, event, handler) {
        if (element && event) {
          element.detachEvent('on' + event, handler)
        }
      }
    }
  })()

2、vue-tree-chart

2-1、安装

cnpm install vue-tree-chart --save

2-2、全局过滤器

//main.js
Vue.directive('drag',el=>{
  let l=0;
  let t=0;
  el.onmousedown=function(e){
      console.log(e);
      //计算出元素距离上边和左边的距离（鼠标点击的位置-元素的位置）
      //这个应该能理解吧
      var disX=e.clientX-el.offsetLeft;
      var disY=e.clientY-el.offsetTop;
      document.onmousemove = function(e){
          //鼠标要按住不松开移动才行，松开就会触发onmouseup的事件
          //计算出元素移动后的位置（鼠标位置-元素初始的disX/disY）
           l=e.clientX-disX;
           t=e.clientY-disY;
          el.style.left=l+'px';
          el.style.top=t+'px';
      }
      document.onmouseup=function(e){
          document.onmousemove=null;
          document.onmouseup=null;
          el.style.left=l+'px';
          el.style.top=t+'px';
      }
  }
})

 

2-3、使用

2-3-1、在components中新建TreeChart.vue组件

<template>
    <div class="tree_box" >
      <table v-if="treeData.name" >
      <tr>
        <td :colspan="Array.isArray(treeData.children) ? treeData.children.length * 2 : 1" 
          :class="{parentLevel: Array.isArray(treeData.children) && treeData.children.length, extend: Array.isArray(treeData.children) && treeData.children.length && treeData.extend}"
        >
          <div :class="{node: true, hasMate: treeData.mate}">
            <div class="person" 
              :class="Array.isArray(treeData.class) ? treeData.class : []"
             
            >
              <div class="avat">
                <img :src="treeData.image_url" @contextmenu="$emit('click-node', treeData)"/>
              </div>
              <!-- <div class="name">{{treeData.name}}</div> -->
            </div>
             <div class="paeson_name">{{treeData.name}}</div>
            <template v-if="Array.isArray(treeData.mate) && treeData.mate.length">
              <div class="person" v-for="(mate, mateIndex) in treeData.mate" :key="treeData.name+mateIndex"
                :class="Array.isArray(mate.class) ? mate.class : []"
                @click="$emit('click-node', mate)"
              >
                <div class="avat">
                  <img :src="mate.image_url" />
                </div>
                <!-- <div class="name">{{mate.name}}</div> -->
              </div>
              <div class="paeson_name">{{treeData.name}}</div>
            </template>
          </div>
          <div class="extend_handle" v-if="Array.isArray(treeData.children) && treeData.children.length" @click="toggleExtend(treeData)">
            <Icon   v-if="open" class="open" type="ios-add-circle-outline" />
            <Icon   v-else class="close" type="ios-remove-circle-outline" />
          </div>
        </td>
      </tr>
      <tr v-if="Array.isArray(treeData.children) && treeData.children.length && treeData.extend">
        <td v-for="(children, index) in treeData.children" :key="index" colspan="2" class="childLevel">
          <TreeChart :node-render="nodeRender" :json="children" @click-node="$emit('click-node', $event)"/>
        </td>
      </tr>
    </table>
    </div>
    
</template>

<script>
import TreeChart from "vue-tree-chart";
// import draggable from 'vuedraggable'
export default {
  name: "TreeChart",
  props: ["json"],
  components: {
    	TreeChart
	},
  data() {
    return {
      open:false,
      treeData: {}
    }
  },
  watch: {
    json: {
      handler: function(Props){
        let extendKey = function(jsonData){
          jsonData.extend = (jsonData.extend===void 0 ? true: !!jsonData.extend);
          if(Array.isArray(jsonData.children)){
            jsonData.children.forEach(c => {
              extendKey(c)
            })
          }
          return jsonData;
        }
        if(Props){
          this.treeData = extendKey(Props);
        }
      },
      immediate: true
    }
  },
  methods: {
    toggleExtend: function(treeData){
      this.open=!this.open;
      treeData.extend = !treeData.extend;
      this.$forceUpdate();
    },
    nodeRender(h, data) {
      return (
        <div
          class={[
            "custom-org-node",
            data.children && data.children.length ? "has-children-label" : "",
          ]}
          on-mousedown={(event) => event.stopPropagation()}
          on-contextmenu={this.contextmenu.bind(this, data)}
        >
          {data.label}
          <dropdown
            trigger="custom"
            class="context-menu"
            visible={this.currentContextMenuId === data.id}
            nativeOn-click={this.handleDropdownClick}
            on-on-click={this.handleContextMenuClick.bind(this, data)}
            style={{
              transform: `scale(${1 / this.zoomHandled}, ${
                1 / this.zoomHandled
              })`,
            }}
            v-click-outside={this.closeMenu}
          >
            <dropdown-menu slot="list">
              {menuList.map((item) => {
                return (
                  <dropdown-item name={item.key}>{item.label}</dropdown-item>
                );
              })}
            </dropdown-menu>
          </dropdown>
        </div>
      );
    },
  }
}
</script>

<style scoped>
.tree_box{
  width: 100%;
  cursor: move;
}
table{border-collapse: separate!important;border-spacing: 0!important;width: 100%;}
td{position: relative; vertical-align: top;padding:0 0 60px 0;text-align: center; }
.extend_handle{position: absolute;left:50%;bottom:30px;transform: translate3d(-10px,0,0);cursor: pointer;}
.extend_handle .open,.extend_handle .close{width: 20px;height: 20px;border-radius: 50%;text-align: center;line-height: 20px;font-size: 20px;}
/* .extend_handle:before{content:""; display: block; width:100%;height: 100%;box-sizing: border-box; border:2px solid;border-color:#ccc #ccc transparent transparent; 
transform: rotateZ(135deg);transform-origin: 50% 50% 0;transition: transform ease 300ms;}
/* .extend_handle:hover:before{border-color:#333 #333 transparent transparent;} */
/* .extend .extend_handle:before{transform: rotateZ(-45deg);} */
.extend::after{content: "";position: absolute;left:50%;bottom:15px;height:15px;border-left:2px solid #ccc;transform: translate3d(-1px,0,0)}
.childLevel::before{content: "";position: absolute;left:50%;bottom:100%;height:15px;border-left:2px solid #ccc;transform: translate3d(-1px,0,0)}
.childLevel::after{content: "";position: absolute;left:0;right:0;top:-15px;border-top:2px solid #ccc;}
.childLevel:first-child:before, .childLevel:last-child:before{display: none;}
.childLevel:first-child:after{left:50%;height:15px; border:2px solid;border-color:#ccc transparent transparent #ccc;border-radius: 6px 0 0 0;transform: translate3d(1px,0,0)}
.childLevel:last-child:after{right:50%;height:15px; border:2px solid;border-color:#ccc #ccc transparent transparent;border-radius: 0 6px 0 0;transform: translate3d(-1px,0,0)}
.childLevel:first-child.childLevel:last-child::after{left:auto;border-radius: 0;border-color:transparent #ccc transparent transparent;transform: translate3d(1px,0,0)}
.node{position: relative; display: inline-block;margin: 0 1em;box-sizing: border-box; text-align: center;}
.node:hover{color: #2d8cf0;cursor: pointer;}
.node .person{position: relative; display: inline-block;z-index: 2;width:6em; }
.node .person .avat{display: block;width:4em;height: 4em;margin:auto;overflow:hidden; background:#fff;box-sizing: border-box;}
.node .person .avat img{width:100%;height: 100%;}
.node .person .name{height:2em;line-height: 2em;overflow: hidden;width:100%;}
.node.hasMate::after{content: "";position: absolute;left:2em;right:2em;top:2em;border-top:2px solid #ccc;z-index: 1;}
.node .paeson_name{position: absolute; top: 55px;right: 0;width: 88px;text-align: center;text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.landscape{transform:translate(-100%,0) rotate(-90deg);transform-origin: 100% 0;}
.landscape .node{text-align: left;height: 8em;width:8em;right: 18px;}
.landscape .person{position: absolute; height: 4em;top:4em;left: 2.5em;}
.landscape .person .avat{position: absolute;left: 0;border-radius: 2em;border-width:2px;}
.landscape .person .name{height: 4em; line-height: 4em;}
.landscape .hasMate{position: relative;}
.landscape .hasMate .person{position: absolute; }
.landscape .hasMate .person:first-child{left:auto; right:-4em;}
.landscape .hasMate .person:last-child{left: -4em;margin-left:0;}
</style>

2-3-2、组件使用

<template>
  <div class="about" v-drag>
    <TreeChart :json="jsonData" @click-node="clickNode"  />
    <div class="gl_prs_ctn" :style='[contextstyle]'>
          <ul class='gl_prs_li'>
              <li @click="handleClick(1)">添加</li>
              <li @click="handleClick(2)">详情</li>
              <li @click="handleClick(3)">编辑</li>
              <li @click="handleClick(4)">删除</li>
          </ul>
    </div>  
  </div>
</template>

<script>
import TreeChart from "@/components/TreeChart";
export default {
  components: {
    TreeChart
  },
  data() {
    return {
      selectId:0,
      jsonData: {
        id:0,
        name: 'root',
        image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
        class: ["rootNode"],
        children: [
          {
            id:1,
            name: 'children1',
            image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
             children: [
              {
                id:3,
                name: 'grandchild',
                image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              },
              {
                id:4,
                name: 'grandchild2',
                image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              },
              {
                id:5,
                name: 'grandchild3',
                image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              }
            ]
          },
          {
            id:2,
            name: 'children2',
            image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
            children: [
              {
                id:6,
                name: 'grandchild',
                image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              },
              {
                id:7,
                name: 'grandchild2',
                image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              },
              {
                id:8,
                name: 'grandchild3',
                image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              }
            ]
          }
        ]
      },
      contextstyle: {
          display: 'none',
          right: '0px',
          top: '0px',
          left: '0px',
          bottom: '0px',
      }, 
    }
  },
  
  created(){
      document.oncontextmenu = ()=>{return false}
      document.addEventListener("click", () => {
            if(this.contextstyle.display == 'block'){
                this.contextstyle.display = 'none'
            }
      })
  },
  methods: {
      handleClick(type){
        console.log(type,this.selectId)
      },
      clickNode(e){
        this.selectId=e.id;
        if(window.event.x + 188 > document.documentElement.clientWidth){
            this.contextstyle.left = 'unset';
            this.contextstyle.right = document.documentElement.clientWidth - window.event.x + 'px';
        }else{
            this.contextstyle.left = window.event.x + 'px';
        }
        if(window.event.y + 166 > document.documentElement.clientHeight){
            this.contextstyle.top = 'unset';
            this.contextstyle.bottom = document.documentElement.clientHeight - window.event.y + 'px';
        }else{
            this.contextstyle.top = window.event.y + 'px';
        }                       
        this.contextstyle.display = 'block';
      },
  }
}
</script>

<style>
.about {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.gl_prs_ctn{
            width: 188px;
            background: rgb(255, 255, 255);
            box-shadow: rgba(0, 0, 0, 0.075) 0px 1px 1px inset, rgba(102, 175, 233, 0.6) 0px 0px 8px;
            z-index: 99999;
            position: fixed;
            padding: 10px;
            box-sizing: content-box;
            height: 142px;
            border-radius: 10px;
}
.gl_prs_li{padding: unset;margin: unset;}
.gl_prs_li>li{
    cursor: pointer;   
    list-style: none;
    border-bottom: 1px solid #efefef;
    padding: 7px 10px;
}
li:last-child { border: unset }
li:hover{
      background: #ccc;
      color: #fff;
}
</style>

3、需求实现

<template>
  <div class="box" v-drag>
    <TreeChart  :json="treeData" @click-node='clickNode' />
  </div>
</template>

<script>
import TreeChart from "vue-tree-chart";
export default {
  data() {
    return {
      treeData: {
        name: "父亲",
            image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
            mate: {
              name: "母亲",
              image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
            },
            children: [
              {
                name: "儿子",
                image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
                 mate: {
                    name: "儿媳",
                    image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
                    },
                    children:[
                        {
                            name: "孙子",
                            image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
                        },
                        {
                            name: "孙子",
                            image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
                        },
                    ]
              },
              {
                name: "兄弟",
                image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
              },
              {
                name: "兄弟",
                image_url: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
              },
        ],
      },
    };
  },
  components: {
    TreeChart,
  },
  methods: {
      clickNode(node) {
        console.log(node,'2222')
      }
  },
};
</script>

<style lang="scss" scoped>
.box{
    position: relative;
    cursor: move;
    /deep/ .extend_handle{
        display: none;
    }
    /deep/ .node .person .avat{
        border: none;
    }
    /deep/ .extend:after{
        height: 35px;
    }
    /deep/ .node .person{
        cursor: pointer;
    }
}
</style>

 

开心就好1314520
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
v-click-outside-x-Vue V2指令对元素外部的单击，触摸，指针或多个事件作出React。-Vue.js开发
05-27
v-click-outside-x Vue V2指令可对元素外部的单击做出React。 安装$ npm install --save v-click-outside-x $ yarn add v-click-outside-x v-click-outside-x Vue V2指令对元素外部的点击做出React。 安装$ npm install --save v-click-outside-x $ yarn add v-click-outside-x从'vue'使用import Vue; 从'v-click-outside-x'导入*作为vClickOutside； Vue.use（vClickOutside）;
Element(3) 使用v-org-tree组件实现组织树形菜单
郑清
07-25 3913
一、前言 iview-admin中提供了 v-org-tree 这么一个vue组件可以实现树形菜单，下面小编来提供一下在element-ui中的使用教程 小编集成了el-dropdown下拉菜单（鼠标左击显示菜单），和右击自定义菜单，两种方式，效果图如下： 二、使用教程 （1）安装依赖 npm install clipboard npm install v-click-outside-x npm...
【前端】vue3树形组件使用
最新发布
weixin_43366051的博客
04-22 2095
随着开发语言及人工智能工具的普及，使得越来越多的人学习使用vue前端工具，本文主要是介绍vue3中树形组件的使用。树形组件是一种常见的用户界面元素，用于以层次结构的形式显示数据。它通常用于展示具有父子关系的数据，例如文件系统结构、组织架构、类别和子类别等。树形组件通常由树节点（节点）组成，每个节点可以包含子节点，形成树状结构。用户可以展开或折叠节点，以便查看或隐藏其子节点。用户可以选择一个或多个节点，以执行特定操作，例如删除、移动或编辑。允许用户通过拖放节点来重新组织树的结构。
15个Vue自定义指令
lgd1917的博客
09-11 334
1. V-Hotkey 仓库地址:https://github.com/Dafrok/v-hotkey Demo: 戳这里https://dafrok.github.io/v-hotkey 安装:npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template> <div v-show="show" v-ho...
vue——实现组织架构图(vue-org-tree)——技能提升
热门推荐
yehaocheng520的博客
08-13 3万+
关于组织架构图，效果图如下： 之前我是用jq写过一个组织架构图，文章链接如下：当时是用的jOrgChart jq版本的组织架构图：https://blog.csdn.net/yehaocheng520/article/details/117379214?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162883781016780264023604%2522%252C%2522scm%2522%253A%252220140713.13010
探索V-ORG-TREE：一款强大的可视化组织结构图生成器
gitblog_00002的博客
03-28 372
探索V-ORG-TREE：一款强大的可视化组织结构图生成器 项目地址:https://gitcode.com/lison16/v-org-tree V-ORG-TREE 是一个基于Vue.js开发的开源项目，用于创建和展示美观、交互式的组织结构图。在当前的数据可视化时代，它提供了一种直观的方式来展示公司架构、团队成员关系、项目组等复杂信息，使得数据解读更加简单直接。 技术分析 基于Vue.js V...
尚硅谷vue3的学习笔记
05-09
"尚硅谷vue3的学习笔记"很可能是记录了关于Vue3的详细学习过程，包括其核心概念、新特性、最佳实践以及常见问题的解决方法。 Vue3 的主要改进点包括： 1. **Composition API**：Vue3 引入了Composition API，这是...
VUE3笔记 VUE3 VUE
01-02
1. **Composition API**：Vue3引入了Composition API，它允许开发者更加灵活地组织和复用代码。相比于Vue2中的Options API，Composition API通过函数式编程的方式使逻辑模块化，提高了代码的可读性和可维护性。 2. ...
vue_notes:vue原始码学习笔记
03-30
当数据发生变化时，Vue会比较新旧虚拟DOM树，找出差异并仅更新必要的部分。 2. **响应式系统**： Vue的响应式系统基于ES5的getter/setter，实现了数据绑定。当数据发生变化时，依赖于该数据的计算属性和视图都会...
学习笔记1111111
05-18
【描述】：“学习笔记1111111”的描述虽然未提供具体信息，但我们可以推测这是一份详细、有组织的学习资料，可能包含了逐步的学习路径、关键概念解释、实践操作步骤以及问题解答等元素。这样的笔记通常由学习者在...
Vue2+Vue3笔记（黑马程序员+尚硅谷）
05-26
学习Vue2+Vue3笔记可以帮助开发者全面掌握Vue.js的两种主要版本，理解它们的异同，以及如何在实际项目中选择合适的版本。黑马程序员和尚硅谷是知名的在线教育平台，它们提供的笔记内容通常覆盖了基础概念、实战案例...
Vue 使用v-org-tree
Wjhsmart的博客
01-25 8390
一、说明 在iview-admin2.4版本之前是没有集成v-org-tree的，那在2.4之前的版本想引入v-org-tree要怎么做呢？下面一步一步来记录下使用v-org-tree插件的过程 二、效果图 三、开始记录过程 1、安装v-org-tree插件，在项目的目录下执行 npm install v-org-tree 2、在main.js...
【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞ 使用vue-content-menu定制可编辑树结构editableTree
Sabrina_cc的博客
12-03 1万+
本文主要讲解了基础Element-ui中el-tree组件的使用，包括对组织机构树的组件封装，使用组织机构树进行查询，以及使用vue-content-menu修改editableTree
vue组织树（树形组件vue3)
m0_49159526的博客
06-21 7032
本插件在element-plus树形组件基础上，进行了二次封装。适用于vue3项目，在具备了element-plus 的Tree组件的所有功能的基础上，又增加了组织树展示效果，并同时支持拖拽，及自定义组织树的展开收起样式......
自定义指令 v-clickoutside 使用方法
boundle_ss的博客
04-14 5429
引入指令 import Clickoutside from 'element-ui/src/utils/clickoutside' 声明指令 export default { directives: { Clickoutside }, data: function() { return { } } } 使用指令 <div v-clickoutside="handleClickOutside"></div> methods: {
vue使用vue-okr-tree实现组织架构树组件
lixinhua_man的博客
07-28 3767
vue-okr-tree
推荐一款高效组织树组件：Vue-Org-Tree
gitblog_00062的博客
04-10 645
推荐一款高效组织树组件：Vue-Org-Tree 项目地址:https://gitcode.com/hukaibaihu/vue-org-tree 在Web开发中，数据展示是我们常常遇到的任务之一，尤其是在处理层级关系的数据时，如部门结构、文件夹目录等。今天我要向大家推荐一个强大的 Vue.js 组件——Vue-Org-Tree。它专为构建美观且功能丰富的组织树而设计，可以帮助开发者轻松地实现这一...
vue自定义指令clickoutside
weixin_43843679的博客
03-04 1529
方法一： <span v-clickoutside="handleClose">内容</span> <script> const clickoutside = { // 初始化指令 bind(el, binding, vnode) { function documentHandler(e) { // 这里判断点击的元素是否是本身，是本身，则返回 if (el.contains(e.target)) { return
v-clickoutside vue点击某个区域外会触发的事件
m0_64684712的博客
03-04 2077
v-clickoutside vue点击某个区域外会触发的事件
vue2尚硅谷学习笔记
09-17
在Vue2中，"尚硅谷学习笔记"是一个学校的名称。它被定义在School.vue文件中的data属性中。在该文件中，我们可以看到name属性被设置为"尚硅谷"。通过在模板中使用双括号语法，我们可以将name属性的值显示在页面上。此外，School.vue文件中还有一个方法showName，当点击页面上的按钮时，会弹出一个消息框，显示学校的名称。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值