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

最新推荐文章于 2024-10-18 12:06:41 发布

MAMAsomers

最新推荐文章于 2024-10-18 12:06:41 发布

阅读量1.8k

点赞数 1

本文链接：https://blog.csdn.net/MAMAsomers/article/details/109159813

版权

本文介绍了如何在Vue2中使用vue2-org-tree组件实现组织框架结构的增删改功能。详细讲解了从下载引入组件，到data属性命名，再到template模板的HTML布局，以及增删改操作的方法和相关CSS样式设计。

摘要由CSDN通过智能技术生成

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')