Elementui Tree 树形控件删除功能

深藏阁楼爱情的钟 2022-09-02 08:11 469阅读 0赞

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/

b6345aacebb7bafb30ea20bb68ccd962.png

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

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

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

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

2：使用
mock.json

  1. {
  2.     "msg": "success",
  3.     "code": 1,
  4.     "data": [
  5.         {
  6.             "id": 1,
  7.             "organName": "yy有限公司",
  8.             "parentId": 0,
  9.             "manager": "zs",
  10.             "phone": "zs",
  11.             "companyId": 1,
  12.             "address": null
  13.         },
  14.         {
  15.             "id": 2,
  16.             "organName": "test311",
  17.             "parentId": 1,
  18.             "manager": "zs",
  19.             "phone": "21",
  20.             "companyId": 1,
  21.             "address": null
  22.         },
  23.         {
  24.             "id": 10,
  25.             "organName": "test4",
  26.             "parentId": 1,
  27.             "manager": "zs",
  28.             "phone": null,
  29.             "companyId": 1,
  30.             "address": null
  31.         },
  32.         {
  33.             "id": 11,
  34.             "organName": "2121",
  35.             "parentId": 1,
  36.             "manager": "212",
  37.             "phone": "13661725475",
  38.             "companyId": 1,
  39.             "address": null
  40.         },
  41.         {
  42.             "id": 12,
  43.             "organName": "212121212",
  44.             "parentId": 2,
  45.             "manager": "212",
  46.             "phone": "13661725475",
  47.             "companyId": 1,
  48.             "address": null
  49.         },
  50.         {
  51.             "id": 13,
  52.             "organName": "www群46",
  53.             "parentId": 11,
  54.             "manager": "ww",
  55.             "phone": "123",
  56.             "companyId": 1,
  57.             "address": null
  58.         },
  59.         {
  60.             "id": 14,
  61.             "organName": "www",
  62.             "parentId": 11,
  63.             "manager": "ww",
  64.             "phone": "123",
  65.             "companyId": 1,
  66.             "address": null
  67.         },
  68.         {
  69.             "id": 15,
  70.             "organName": "",
  71.             "parentId": null,
  72.             "manager": "",
  73.             "phone": "",
  74.             "companyId": 1,
  75.             "address": null
  76.         },
  77.         {
  78.             "id": 16,
  79.             "organName": "21212",
  80.             "parentId": null,
  81.             "manager": "",
  82.             "phone": "",
  83.             "companyId": 1,
  84.             "address": null
  85.         },
  86.         {
  87.             "id": 17,
  88.             "organName": "2131314",
  89.             "parentId": null,
  90.             "manager": "",
  91.             "phone": "",
  92.             "companyId": 1,
  93.             "address": null
  94.         },
  95.         {
  96.             "id": 18,
  97.             "organName": "q313",
  98.             "parentId": 2,
  99.             "manager": "",
  100.             "phone": "",
  101.             "companyId": 1,
  102.             "address": null
  103.         },
  104.         {
  105.             "id": 19,
  106.             "organName": "8888",
  107.             "parentId": 1,
  108.             "manager": "11",
  109.             "phone": "",
  110.             "companyId": 1,
  111.             "address": null
  112.         },
  113.         {
  114.             "id": 20,
  115.             "organName": "21",
  116.             "parentId": 1,
  117.             "manager": "12",
  118.             "phone": "21",
  119.             "companyId": 1,
  120.             "address": null
  121.         },
  122.         {
  123.             "id": 21,
  124.             "organName": "wwww",
  125.             "parentId": 1,
  126.             "manager": "www",
  127.             "phone": "13661725475",
  128.             "companyId": 1,
  129.             "address": null
  130.         },
  131.         {
  132.             "id": 22,
  133.             "organName": "1313",
  134.             "parentId": 1,
  135.             "manager": "313",
  136.             "phone": "31",
  137.             "companyId": 1,
  138.             "address": null
  139.         },
  140.         {
  141.             "id": 23,
  142.             "organName": "test",
  143.             "parentId": 1,
  144.             "manager": "zs",
  145.             "phone": "",
  146.             "companyId": 1,
  147.             "address": null
  148.         },
  149.         {
  150.             "id": 24,
  151.             "organName": "test_01",
  152.             "parentId": 23,
  153.             "manager": "zs",
  154.             "phone": "",
  155.             "companyId": 1,
  156.             "address": null
  157.         },
  158.         {
  159.             "id": 25,
  160.             "organName": "w121",
  161.             "parentId": 1,
  162.             "manager": "212",
  163.             "phone": "212",
  164.             "companyId": 1,
  165.             "address": null
  166.         }
  167.     ]
  168. }

3:
test.vue

  1. <template>
  2.   <div>
  3.     <el-col :span="6">
  4.       <div class="ztree">
  5.         <el-tree
  6.           :data="treeData"
  7.           show-checkbox
  8.           default-expand-all
  9.           node-key="id"
  10.           ref="tree"
  11.           highlight-current
  12.           :props="defaultProps"
  13.           @node-click="nodeClickHandler"
  14.           @check="checkHandler"
  15.           :render-content="renderContent"
  16.         >
  17.         </el-tree>
  18.       </div>
  19.     </el-col>
  20.   </div>
  21. </template>
  23. <script>
  24. //调用接口
  25. // import { deleteSubject } from "@/api/data/organ";
  27. export default {
  28.   data() {
  29.     return {
  30.       setTree: [],
  31.       defaultProps: {
  32.         children: "children",
  33.         label: "organName",
  34.       },
  35.       treeData: [],
  36.       organList: [],
  37.     };
  38.   },
  39.   created() {
  40.     //加载部门管理节点接口定义
  41.     this.getQuerycheckList();
  42.   },
  43.   methods: {
  44.     renderContent(h, { node, data, store }) {
  45.       console.log(data);
  46.       return (
  47.         <span
  48.           class="custom-tree-node"
  49.           on-mouseenter={() => (data.isHover = true)}
  50.           on-mouseleave={() => (data.isHover = false)}
  51.         >
  52.           <span>{data.organName}</span>
  53.           {data.parentId !== 0 && data.isHover && (
  54.             <i
  55.               class="el-icon-error danger"
  56.               on-click={(e) => {
  57.                 e.stopPropagation();
  58.                 this.remove(node, data);
  59.               }}
  60.             ></i>
  61.           )}
  62.         </span>
  63.       );
  64.     },
  65.     remove(node, data) {
  66.       this.$confirm("此操作将永久删除该条目, 是否继续?", "提示", {
  67.         confirmButtonText: "确定",
  68.         cancelButtonText: "取消",
  69.         type: "warning",
  70.       })
  71.         .then(() => {
  72.           this.handleDelete(null, data);
  73.           if (data.parentId === 0) {
  74.             return;
  75.           }
  76.           const parent = node.parent;
  77.           const children = parent.data.children || parent.data;
  78.           const index = children.findIndex((d) => d.id === data.id);
  79.           children.splice(index, 1);
  80.           // 发请求删除
  81.           this.$message({
  82.             type: "success",
  83.             message: "删除成功!",
  84.           });
  85.         })
  86.         .catch(() => {
  87.           this.$message({
  88.             type: "info",
  89.             message: "已取消删除",
  90.           });
  91.         });
  92.     },
  93.     //勾选
  94.     checkHandler(...value) {
  95.       console.log(value[1]);
  96.       console.log(value[1].checkedNodes.map((a) => a.organName));
  97.     },
  98.     //部门管理节点接口定义
  99.     getQuerycheckList() {
  100.       const params = {};
  101.       this.dataLoading = true;
  102.       import("./mock").then((res) => {
  103.         this.setTree = res.data;
  104.         this.organList = res.data.map((a) => ({
  105.           label: a.organName,
  106.           value: a.id,
  107.         }));
  108.         this.getListData();
  109.         this.dataLoading = false;
  110.       });
  111.     },
  113.     //对json的格式的转化
  114.     getListData() {
  115.       let dataArray = [];
  116.       this.setTree.forEach(function (data) {
  117.         let parentId = data.parentId;
  118.         if (parentId === 0) {
  119.           let objTemp = {
  120.             id: data.id,
  121.             organName: data.organName,
  122.             manager: data.manager,
  123.             phone: data.manager,
  124.             parentId: parentId,
  125.           };
  126.           dataArray.push(objTemp);
  127.         }
  128.       });
  129.       this.treeData = this.data2treeDG(this.setTree, dataArray);
  130.     },
  131.     data2treeDG(datas, dataArray) {
  132.       for (let j = 0; j < dataArray.length; j++) {
  133.         let dataArrayIndex = dataArray[j];
  134.         let childrenArray = [];
  135.         let Id = dataArrayIndex.id;
  136.         for (let i = 0; i < datas.length; i++) {
  137.           let data = datas[i];
  138.           let parentId = data.parentId;
  139.           if (parentId == Id) {
  140.             //判断是否为儿子节点
  141.             let objTemp = {
  142.               id: data.id,
  143.               organName: data.organName,
  144.               manager: data.manager,
  145.               phone: data.phone,
  146.               parentId: parentId,
  147.               isHover: false,
  148.             };
  149.             childrenArray.push(objTemp);
  150.           }
  151.         }
  152.         dataArrayIndex.children = childrenArray;
  153.         if (childrenArray.length > 0) {
  154.           //有儿子节点则递归
  155.           this.data2treeDG(datas, childrenArray);
  156.         }
  157.       }
  158.       return dataArray;
  159.     },
  161.     //调用删除接口
  162.     handleDelete(index, row) {
  163.       const params = {
  164.         id: row.id,
  165.       };
  166.       this.dataLoading = true;
  167.       deleteSubject(params).then((res) => {
  168.         this.$notify({
  169.           message: "删除成功",
  170.           type: "success",
  171.           duration: 2000,
  172.         });
  173.         this.getQuerycheckList();
  174.         console.log(this.pvData);
  175.         this.dataLoading = false;
  176.       });
  177.     },
  178.     nodeClickHandler(...rest) {
  179.       console.log(rest);
  180.       this.form = rest[0];
  181.     },
  182.   },
  183. };
  184. </script>
  185. <style lang="scss">
  186. .danger {
  187.   color: red;
  188. }
  189. </style>

渲染：

5d4b40ed78341a837bc2e43a8a873d22.gif

往期干货：

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

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

发表评论

表情：
评论列表 （有 0 条评论，469人围观）

还没有评论，来说两句吧...

相关阅读