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
    },
  }
}
           

效果

學無止境,謙卑而行.