要求：
Elementui Tree 树形控件，将勾选选中的值放在list集合里面提交
提交格式是这样的，也就是将勾选项放在一个数组里面，作为参数提交给后端即可。
步骤：
这里我用到了json本地的数据，因为掉接口数据，不太方便写demo，后面统一都用到mock，json数据了，如果需要用到项目里面，后面直接修改一下
将
//获取树权限节点接口定义 getZtreeList() { this.dataLoading = true; import("./mock").then((res) => { this.setTree = res.data; this.organList = res.data.map((a) => ({ label: a.description, value: a.id, })); this.getListData(); this.dataLoading = false; }); },
改成这样即可
//调用接口 import {getZtreeList} from "@/api/permission/role";
//获取树权限节点接口定义 getZtreeList() { this.dataLoading = true; getZtreeList(params).then((res) => { this.setTree = res.data; this.organList = res.data.map((a) => ({ label: a.description, value: a.id, })); this.getListData(); this.dataLoading = false; }); },
话不多说了，来看具体的操作吧
1:在views底下新建一个test文件夹
里面新建一个vue文件和一个json文件
2：使用
mock.json
{ "msg": "success", "code": 1, "data": [ { "id": 2, "permissionToken": "data_spectaculars_token1", "description": "数据看板", "parentId": 1, "checked": true }, { "id": 3, "permissionToken": "data_spectaculars_stat_token2", "description": "统计看板", "parentId": 2, "checked": true }, { "id": 4, "permissionToken": "data_spectaculars_health_token2", "description": "健康看板", "parentId": 2, "checked": true }, { "id": 1, "permissionToken": "system_token0", "description": "系统权限", "parentId": 0, "checked": false }, { "id": 5, "permissionToken": "account_management_token1", "description": "账户管理", "parentId": 1, "checked": false }, { "id": 6, "permissionToken": "account_management_user_token2", "description": "用户管理", "parentId": 5, "checked": false }, { "id": 7, "permissionToken": "account_management_permission_token2", "description": "权限管理", "parentId": 5, "checked": false }, { "id": 8, "permissionToken": "data_management_token1", "description": "数据管理", "parentId": 1, "checked": false }, { "id": 9, "permissionToken": "data_management_organ_token2", "description": "部门管理", "parentId": 8, "checked": false }, { "id": 10, "permissionToken": "data_management_config_token2", "description": "数据配置", "parentId": 8, "checked": false }, { "id": 11, "permissionToken": "data_management_staff_token2", "description": "人员管理", "parentId": 8, "checked": false }, { "id": 12, "permissionToken": "data_management_asset_token2", "description": "资产管理", "parentId": 8, "checked": false }, { "id": 13, "permissionToken": "device_management_token1", "description": "设备管理", "parentId": 1, "checked": false } ] }
3:test.vue实例代码
<template> <div class="ztree"> <el-tree :data="treeData" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps" @check="checkHandler" > </el-tree> <el-button type="primary" @click="createData()">确定</el-button> </div> </template> <script> export default { data() { return { setTree: [], defaultProps: { children: "children", label: "description", }, treeData: [], organList: [], questionForm: { //permissionTokens: [], }, }; }, watch: {}, created() { //加载树节点 this.getZtreeList(); }, methods: { //树文件勾选事件 checkHandler(...value) { let a = value[1].checkedNodes.map((a) => a.description); let b = value[1].checkedNodes.map((a) => a.permissionToken); console.log(a); this.questionForm.description = a; this.questionForm.permissionToken = b; }, //获取树权限节点接口定义 getZtreeList() { this.dataLoading = true; import("./mock").then((res) => { this.setTree = res.data; this.organList = res.data.map((a) => ({ label: a.description, 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, description: data.description, permissionToken: data.permissionToken, 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, description: data.description, permissionToken: data.permissionToken, parentId: parentId, }; childrenArray.push(objTemp); } } dataArrayIndex.children = childrenArray; //console.log("打印childrenArray", dataArrayIndex.children); if (childrenArray.length > 0) { //有儿子节点则递归 this.data2treeDG(datas, childrenArray); } } // console.log("打印处理过的json", dataArray); return dataArray; }, //添加角色 async createData() { const params = this.questionForm; alert(JSON.stringify(params)); }, }, }; </script>
效果：
以上就是Elementui Tree 树形控件，将勾选选中的值放在list集合里面提交
======================================================
回到今天的正题：
Elementui Tree 树形控件删除子节点功能的实现
在这个功能上
需要接续开发一个功能，前面其实也写过
现在再写一遍
写具体一点吧
(Elementui Tree 树形控件删除子节点)
无论啥时候，写什么代码，都要先看一下文档，毕竟看完文档之后，可以解决99%的问题哦
文档链接：
组件：https://element.eleme.cn/#/zh-CN/component/tree
功能：当鼠标划过Tree 树形控件的节点的时候，会出现一个删除的按钮
点击删除按钮，会出现弹框询问是否删除
选中删除，则删除树节点(最上层的父节点不可删除)
1:第一步,当然是添加删除元素了
在文档里面有这样的说明：
可以通过两种方法进行树节点内容的自定义：render-content和 scoped slot。使用render-content指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。使用 scoped slot 会传入两个参数node和data，分别表示当前节点的 Node 对象和当前节点的数据。注意：由于 jsfiddle 不支持 JSX 语法，所以render-content示例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。
所以
我们今天使用的还是
:render-content="renderContent"
直接将文档里面的这个例子，赋值到我们的项目代码里面吧，直接简单且粗暴。
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.description}</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: "已取消删除", }); }); }, //调用删除接口 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; }); },
需要注意的地方
因为功能是，当鼠标划过树形控件的子节点的时候
才会出现了那个删除的图标
需要在渲染的时候设置一下isHover: false
isHover: false,
test.vue
<template> <div class="ztree"> <el-tree :data="treeData" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps" @check="checkHandler" :render-content="renderContent" > </el-tree> <el-button type="primary" @click="createData()">确定</el-button> </div> </template> <script> //调用接口 // import { // deleteSubject, // } from "@/api/data/organ"; export default { data() { return { setTree: [], defaultProps: { children: "children", label: "description", }, treeData: [], organList: [], questionForm: { //permissionTokens: [], }, }; }, created() { //加载树节点 this.getZtreeList(); }, 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.description}</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: "已取消删除", }); }); }, //调用删除接口 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]; // }, //树文件勾选事件 checkHandler(...value) { let a = value[1].checkedNodes.map((a) => a.description); let b = value[1].checkedNodes.map((a) => a.permissionToken); console.log(a); this.questionForm.description = a; this.questionForm.permissionToken = b; }, //获取树权限节点接口定义 getZtreeList() { this.dataLoading = true; import("./mock").then((res) => { this.setTree = res.data; this.organList = res.data.map((a) => ({ label: a.description, 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, description: data.description, permissionToken: data.permissionToken, 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, description: data.description, permissionToken: data.permissionToken, parentId: parentId, isHover: false, }; childrenArray.push(objTemp); } } dataArrayIndex.children = childrenArray; //console.log("打印childrenArray", dataArrayIndex.children); if (childrenArray.length > 0) { //有儿子节点则递归 this.data2treeDG(datas, childrenArray); } } // console.log("打印处理过的json", dataArray); return dataArray; }, //添加角色 async createData() { const params = this.questionForm; alert(JSON.stringify(params)); }, }, }; </script> <style lang="scss"> .danger { color: red; } </style>
效果
删除设备管理的节点，并且想后端发送删除节点的请求，调用接口成功，则删除成功哦。
调用后端接口不成功，则显示取消删除。
