Elementui Tree 树形控件删除功能

客官°小女子只卖身不卖艺 2022-09-01 13:51 366阅读 0赞

vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架，这是使用vue技术栈开发的前端程序员的首选管理系统模板，模板以及非常的成熟了，并且有相关的社区和维护人员，开发时候遇到问题也不要慌。

推荐指数：  
Github 地址：[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]  
Demo体验：[https://panjiachen.github.io/vue-element-admin/\#/dashboard][https_panjiachen.github.io_vue-element-admin_dashboard]  
官方文档：[https://panjiachen.github.io/vue-element-admin-site/zh/][https_panjiachen.github.io_vue-element-admin-site_zh]

![0b432f5a35060c2b85bc9ef1a76b8323.png][]

今天就来说一下，怎么使用Tree Table 树形表格。废话不多说，首先看一下官方文档吧，看看官方文档是怎么给到的例子吧：

组件：[https://element.eleme.cn/\#/zh-CN/component/tree][https_element.eleme.cn_zh-CN_component_tree]

功能：当鼠标划过Tree 树形控件的节点的时候，会出现一个删除的按钮  
点击删除按钮，会出现弹框询问是否删除  
选中删除，则删除树节点(最上层的父节点不可删除)

1:在views底下新建一个test文件夹  
里面新建一个vue文件和一个json文件

![aacad81c70d73252657e7f276a0501ca.png][]

2：使用  
mock.json

{
        "msg": "success",
        "code": 1,
        "data": [
            {
                "id": 1,
                "organName": "yy有限公司",
                "parentId": 0,
                "manager": "zs",
                "phone": "zs",
                "companyId": 1,
                "address": null
            },
            {
                "id": 2,
                "organName": "test311",
                "parentId": 1,
                "manager": "zs",
                "phone": "21",
                "companyId": 1,
                "address": null
            },
            {
                "id": 10,
                "organName": "test4",
                "parentId": 1,
                "manager": "zs",
                "phone": null,
                "companyId": 1,
                "address": null
            },
            {
                "id": 11,
                "organName": "2121",
                "parentId": 1,
                "manager": "212",
                "phone": "13661725475",
                "companyId": 1,
                "address": null
            },
            {
                "id": 12,
                "organName": "212121212",
                "parentId": 2,
                "manager": "212",
                "phone": "13661725475",
                "companyId": 1,
                "address": null
            },
            {
                "id": 13,
                "organName": "www群46",
                "parentId": 11,
                "manager": "ww",
                "phone": "123",
                "companyId": 1,
                "address": null
            },
            {
                "id": 14,
                "organName": "www",
                "parentId": 11,
                "manager": "ww",
                "phone": "123",
                "companyId": 1,
                "address": null
            },
            {
                "id": 15,
                "organName": "",
                "parentId": null,
                "manager": "",
                "phone": "",
                "companyId": 1,
                "address": null
            },
            {
                "id": 16,
                "organName": "21212",
                "parentId": null,
                "manager": "",
                "phone": "",
                "companyId": 1,
                "address": null
            },
            {
                "id": 17,
                "organName": "2131314",
                "parentId": null,
                "manager": "",
                "phone": "",
                "companyId": 1,
                "address": null
            },
            {
                "id": 18,
                "organName": "q313",
                "parentId": 2,
                "manager": "",
                "phone": "",
                "companyId": 1,
                "address": null
            },
            {
                "id": 19,
                "organName": "8888",
                "parentId": 1,
                "manager": "11",
                "phone": "",
                "companyId": 1,
                "address": null
            },
            {
                "id": 20,
                "organName": "21",
                "parentId": 1,
                "manager": "12",
                "phone": "21",
                "companyId": 1,
                "address": null
            },
            {
                "id": 21,
                "organName": "wwww",
                "parentId": 1,
                "manager": "www",
                "phone": "13661725475",
                "companyId": 1,
                "address": null
            },
            {
                "id": 22,
                "organName": "1313",
                "parentId": 1,
                "manager": "313",
                "phone": "31",
                "companyId": 1,
                "address": null
            },
            {
                "id": 23,
                "organName": "test",
                "parentId": 1,
                "manager": "zs",
                "phone": "",
                "companyId": 1,
                "address": null
            },
            {
                "id": 24,
                "organName": "test_01",
                "parentId": 23,
                "manager": "zs",
                "phone": "",
                "companyId": 1,
                "address": null
            },
            {
                "id": 25,
                "organName": "w121",
                "parentId": 1,
                "manager": "212",
                "phone": "212",
                "companyId": 1,
                "address": null
            }
        ]
    }

3:  
test.vue

<template>
      <div>
        <el-col :span="6">
          <div class="ztree">
            <el-tree
              :data="treeData"
              show-checkbox
              default-expand-all
              node-key="id"
              ref="tree"
              highlight-current
              :props="defaultProps"
              @node-click="nodeClickHandler"
              @check="checkHandler"
              :render-content="renderContent"
            >
            </el-tree>
          </div>
        </el-col>
      </div>
    </template>
    
    <script>
    //调用接口
    // import { deleteSubject } from "@/api/data/organ";
    
    export default {
      data() {
        return {
          setTree: [],
          defaultProps: {
            children: "children",
            label: "organName",
          },
          treeData: [],
          organList: [],
        };
      },
      created() {
        //加载部门管理节点接口定义
        this.getQuerycheckList();
      },
      methods: {
        renderContent(h, { node, data, store }) {
          console.log(data);
          return (
            <span
              class="custom-tree-node"
              on-mouseenter={() => (data.isHover = true)}
              on-mouseleave={() => (data.isHover = false)}
            >
              <span>{data.organName}</span>
              {data.parentId !== 0 && data.isHover && (
                <i
                  class="el-icon-error danger"
                  on-click={(e) => {
                    e.stopPropagation();
                    this.remove(node, data);
                  }}
                ></i>
              )}
            </span>
          );
        },
        remove(node, data) {
          this.$confirm("此操作将永久删除该条目, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.handleDelete(null, data);
              if (data.parentId === 0) {
                return;
              }
              const parent = node.parent;
              const children = parent.data.children || parent.data;
              const index = children.findIndex((d) => d.id === data.id);
              children.splice(index, 1);
              // 发请求删除
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        },
        //勾选
        checkHandler(...value) {
          console.log(value[1]);
          console.log(value[1].checkedNodes.map((a) => a.organName));
        },
        //部门管理节点接口定义
        getQuerycheckList() {
          const params = {};
          this.dataLoading = true;
          import("./mock").then((res) => {
            this.setTree = res.data;
            this.organList = res.data.map((a) => ({
              label: a.organName,
              value: a.id,
            }));
            this.getListData();
            this.dataLoading = false;
          });
        },
    
        //对json的格式的转化
        getListData() {
          let dataArray = [];
          this.setTree.forEach(function (data) {
            let parentId = data.parentId;
            if (parentId === 0) {
              let objTemp = {
                id: data.id,
                organName: data.organName,
                manager: data.manager,
                phone: data.manager,
                parentId: parentId,
              };
              dataArray.push(objTemp);
            }
          });
          this.treeData = this.data2treeDG(this.setTree, dataArray);
        },
        data2treeDG(datas, dataArray) {
          for (let j = 0; j < dataArray.length; j++) {
            let dataArrayIndex = dataArray[j];
            let childrenArray = [];
            let Id = dataArrayIndex.id;
            for (let i = 0; i < datas.length; i++) {
              let data = datas[i];
              let parentId = data.parentId;
              if (parentId == Id) {
                //判断是否为儿子节点
                let objTemp = {
                  id: data.id,
                  organName: data.organName,
                  manager: data.manager,
                  phone: data.phone,
                  parentId: parentId,
                  isHover: false,
                };
                childrenArray.push(objTemp);
              }
            }
            dataArrayIndex.children = childrenArray;
            if (childrenArray.length > 0) {
              //有儿子节点则递归
              this.data2treeDG(datas, childrenArray);
            }
          }
          return dataArray;
        },
    
        //调用删除接口
        handleDelete(index, row) {
          const params = {
            id: row.id,
          };
          this.dataLoading = true;
          deleteSubject(params).then((res) => {
            this.$notify({
              message: "删除成功",
              type: "success",
              duration: 2000,
            });
            this.getQuerycheckList();
            console.log(this.pvData);
            this.dataLoading = false;
          });
        },
        nodeClickHandler(...rest) {
          console.log(rest);
          this.form = rest[0];
        },
      },
    };
    </script>
    <style lang="scss">
    .danger {
      color: red;
    }
    </style>

渲染：

![5d4b40ed78341a837bc2e43a8a873d22.gif][]

**往期干货：**

#### [26个经典微信小程序+35套微信小程序源码+微信小程序合集源码下载(免费)][26_35] ####

#### [干货：2021最新前端学习视频~~速度领取][2021] ####

[https_github.com_PanJiaChen_vue-element-admin]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FPanJiaChen%2Fvue-element-admin
[https_panjiachen.github.io_vue-element-admin_dashboard]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin%2F%23%2Fdashboard
[https_panjiachen.github.io_vue-element-admin-site_zh]: https://links.jianshu.com/go?to=https%3A%2F%2Fpanjiachen.github.io%2Fvue-element-admin-site%2Fzh%2F
[0b432f5a35060c2b85bc9ef1a76b8323.png]: /images/20220829/c2fd363c85c947889a87643a97118768.png
[https_element.eleme.cn_zh-CN_component_tree]: https://links.jianshu.com/go?to=https%3A%2F%2Felement.eleme.cn%2F%23%2Fzh-CN%2Fcomponent%2Ftree
[aacad81c70d73252657e7f276a0501ca.png]: /images/20220829/6177936099c04df8a2cbbfdd660bde9a.png
[5d4b40ed78341a837bc2e43a8a873d22.gif]: /images/20220829/9498738ec8fb4115be2bf6b22a33ebd7.png
[26_35]: https://links.jianshu.com/go?to=http%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzg3ODAxNzc0NA%253D%253D%26chksm%3Dcf1b6f92f86ce68464b25ae23f0ca1595a47774d38855bb636a188afa112fa44b1f17bf58399%26idx%3D1%26mid%3D2247483949%26scene%3D21%26sn%3Dc8fa2347973fe0648af4fe64c019c703%23wechat_redirect
[2021]: https://links.jianshu.com/go?to=http%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzg3ODAxNzc0NA%253D%253D%26chksm%3Dcf1b6f9ff86ce689e552deef26bc31c0a88bcfc31d6d661fe2dd5d5753f15765651ce6187370%26idx%3D1%26mid%3D2247483936%26scene%3D21%26sn%3D6c44ce566abac9c98c77c3edf69dc9d6%23wechat_redirect