Antd——如何给树形控件增加编辑删除

简介: Antd——如何给树形控件增加编辑删除

前言

使用Ant Design Vue进行开发,部门管理试树形控件,不过现有的组件并没有提供相应的功能,所以我们要改造一番;

内容

API文档

其实也可以通过rightClick事件,增加一个右键菜单,不过和原型不符所以我们通过插槽的方式

数据组装

我们要对数据进行组装,插入scopedSlots: { title: 'xxx'} | xxx可以自定义

// 数据组装
function cover(arr) {
    arr.forEach((item) => {
    item.title = item.department_name
    item.value = item._id
    item.key = item._id
    item.scopedSlots = {title: 'title'}
    if (item.sub && item.sub.length) {
      item.children = item.sub
      cover(item.children)
    }
  })
  return arr
}
// 把公司加到第一级部门去
let newdata = [
  {
    department_name: '公司',
    _id: "0",
    sub: JSON.parse(JSON.stringify(data.data))
  },
]
// 树形组件
this.departmentArr = cover(newdata)

示例代码

只是一个示例|给大家一个思路|一些业务代码删除了| 主要是1,2的操作

<template>
  <a-row>
<!--部门模块-->
    <a-col :span="5" style="min-width: 180px; margin-right: 10px;">
      <a-card>
        <a-row type="flex" justify="start">
          <a-col :span="2">
            <span class="cu-line"></span>
          </a-col>
          <a-col :span="20">
            <span style="font-size: 17px;">组织架构</span>
          </a-col>
          <a-col :span="2">
            <a-icon class="cu-icon"  @click="addDepartment" type="plus-square" />
          </a-col>
        </a-row>
      </a-card>
<!--部门树 TODO 后期优化为滚动列表-->
      <a-card style="min-height: 750px;">
        <a-spin :spinning="spinning">
          <a-tree
              :tree-data="departmentArr"
              :replaceFields="replaceFields"
              :expanded-keys="expandedKeys"
              v-model="defaultCheckedKeys"
              @expand="onExpand"
          >
            <!--2.插槽-->
            <template #title="item">
              <a-row type="flex">
                <a-col flex="auto"><span>{{ item.title }}</span></a-col>
                <a-col flex="50px" v-show="item._id !== '0'">
                  <a-icon type="edit" @click="editDepartment(item)" style="margin-right: 10px"/>
                  <a-icon type="delete" @click="deleteDepartment(item._id)"/>
                </a-col>
              </a-row>
            </template>
          </a-tree>
        </a-spin>
      </a-card>
    </a-col>
  </a-row>
</template>
export default {
  data() {
    return {
      // 通用
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      // 部门相关
      spinning: false,
      departmentModel: {
        modalVisible: false,
        loading: false,
        title: ''
      },
      departmentFormData: {
        department_name: "",
        parent_id: "",
      },
      departmentModalLoading: false,
      departmentArr: [],
      expandedKeys: [],
      defaultCheckedKeys: [],
      replaceFields: {
        children: "sub",
        title: "department_name",
        key: "_id",
      },
    }
   },
  methods: {
    /**
     * 部门相关操作
     */
    // 获取部门数据
    getDepartmentList() {
      this.spinning = true
      let payload = {
        data: {
          pageNum: 1,
          pageSize: 1000,
        },
      }
      this.$mqtt.doPublish(
          {
            pubTopic: "xxxxx",
            payload,
          },
          (topic, data) => {
         
            data.data
            // 1. 数据组装
            function cover(arr) {
              arr.forEach((item) => {
                item.title = item.department_name
                item.value = item._id
                item.key = item._id
                // 增加scopedSlots属性
                item.scopedSlots = {title: 'title'}
                if (item.sub && item.sub.length) {
                  item.children = item.sub
                  cover(item.children)
                }
              })
              return arr
            }
            // 把公司加到第一级部门去
            let newdata = [
              {
                department_name: '公司',
                _id: "0",
                sub: JSON.parse(JSON.stringify(data.data))
              },
            ]
            // 树形组件
            this.departmentArr = cover(newdata)
            this.spinning = false
          },
          this
      )
    },
    // 展开选项
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
    },
  }
}

效果

学无止境,谦卑而行.

目录
相关文章
|
6月前
|
JavaScript
【实用模板】Vue代码文件常用创建或编辑抽屉
【实用模板】Vue代码文件常用创建或编辑抽屉
|
6月前
Vue3随内容增加滚动到底部
Vue3随内容增加滚动到底部
184 0
|
数据库
Layui入门&动态树&动态选项卡&用户增加&修改&删除&(一)
Layui入门&动态树&动态选项卡&用户增加&修改&删除&
|
JavaScript 索引
【vue】element ui 实现动态表单点击按钮新增行/删除行
【vue】element ui 实现动态表单点击按钮新增行/删除行
3399 0
|
6月前
|
JavaScript
vue中有关表格中的表格头中添加悬浮提示的ui问题
vue中有关表格中的表格头中添加悬浮提示的ui问题
169 1
|
4月前
|
开发框架 监控 前端开发
使用Vue-TreeSelect组件的时候,用watch变量方式解决弹出编辑对话框界面无法触发更新的问题
使用Vue-TreeSelect组件的时候,用watch变量方式解决弹出编辑对话框界面无法触发更新的问题
|
6月前
|
JavaScript
vue3表格编辑(数据回显)和删除功能实现
vue3表格编辑(数据回显)和删除功能实现
86 1
|
6月前
|
移动开发 前端开发
VUE3一种用户可以设置显示隐藏列表内容的方法
VUE3一种用户可以设置显示隐藏列表内容的方法
68 0
|
6月前
|
前端开发 JavaScript 程序员
avue中怎样隐藏新增和编辑的按钮
avue中怎样隐藏新增和编辑的按钮
|
12月前
|
JSON JavaScript 前端开发
Elementui Tree 树形控件删除功能
Elementui Tree 树形控件删除功能
101 0
Elementui Tree 树形控件删除功能