Elementui Tree 树形控件删除功能

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

推荐指数：
Github 地址：https://github.com/PanJiaChen/vue-element-admin
Demo体验：https://panjiachen.github.io/vue-element-admin/#/dashboard
官方文档：https://panjiachen.github.io/vue-element-admin-site/zh/

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

组件：https://element.eleme.cn/#/zh-CN/component/tree

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

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

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>

渲染：

往期干货：

26个经典微信小程序+35套微信小程序源码+微信小程序合集源码下载（免费）

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