vue2-org-tree vue 框架组织框架结构增删实现

关注

VIP免费原创最新推荐文章于 2026-08-10 14:38:16 发布 1.9k 阅读 AI 写同款· GEO 优化 ›

vue2-org-tree 基于vue 框架组织框架结构增删修节点实现

1.下载并引入

import Vue2OrgTree from 'vue2-org-tree'
import {
   
    mapGetters } from 'vuex'
Vue.use(Vue2OrgTree)

2.data 属性命名

  data() {
   
   
    return {
   
   
      data: {
   
   
        id: 0,
        level: 0,
        deptName: '',
        list: []
      },
      horizontal: false,
      collapsable: true,
      expandAll: false,
      formAdd: this.$form.createForm(this),
      formUpdate: this.$form.createForm(this),
      addShow: false,
      updateShow: false,
      model: {
   
   },
      confirmLoading: false,
      parent: {
   
   },
      spinning: true
    }

3.template模板的HTML

   <vue2-org-tree
            name="test"
            :data="data"
            :props="{label:'deptName',children:'list',expand: 'expand'}"
            :horizontal="false"
            :collapsable="false"
            label-class-name="bg-blue"
            :render-content="renderContent"
    />

4.方法

 computed: {
   
   
    ...mapGetters(['info'])
  },
 created() {
   
   
    this.init()
  },
  init() {
   
   
      this.spinning = true
      api
        .queryDepartment({
   
   })
        .then(res => {
   
   
          let json = JSON.stringify(res.t.list).replace(/sonList/g, 'list')