ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

element-ui +tree树节点懒加载下的添加,编辑,移除

2021-09-10 22:00:43  阅读:94  来源: 互联网

标签:node resolve undefined temp tree element 移除 data id


话不多说,先看图再看代码,因为我第一层是默认就会带出来的,不能删除和编辑,所以第一个只有添加

 

 以下是代码,

<template>   <div>     <el-tree       :props="props"       :load="loadNode"       lazy       ref="tree"       accordion       :default-expanded-keys="expandedKeys"       node-key="id"       style="height: 750px"       @node-click="handleNodeClick"     >       <span class="custom-tree-node" slot-scope="{ node, data }">         <span>{{ data.name }}</span>         <span>           <el-button             style="margin-left: 5px"             type="text"             size="mini"             @click="() => open(node, data, 1)"           >             添加           </el-button>           <el-button             style="margin-left: 5px"             v-if="!data.project"             type="text"             size="mini"             @click="() => open(node, data, 2)"           >             编辑           </el-button>           <el-button             v-if="!data.project"             style="margin-left: 5px"             type="text"             size="mini"             @click="() => remove(node, data)"           >             删除           </el-button>         </span>       </span>     </el-tree>     <el-dialog :visible.sync="dialogVisible" width="30%">       <el-form ref="form" :model="temp" label-width="80px" :rules="rules">         <el-form-item label="编码" prop="code">           <el-input v-model="temp.code"></el-input>         </el-form-item>         <el-form-item label="名称" prop="name">           <el-input v-model="temp.name"></el-input>         </el-form-item>       </el-form>       <span slot="footer" class="dialog-footer">         <el-button size="small" @click="dialogVisible = false">取 消</el-button>         <el-button size="small" type="primary" @click="submit">确 定</el-button>       </span>     </el-dialog>   </div> </template>
<script> import {   add,   remove,   update,   selectListByParentId, } from "@/api/cost/costbudgetcategory"; export default {   data() {     return {       expandedKeys: [],       rules: {         code: [{ required: true, message: "请输入编码", trigger: "blur" }],         name: [{ required: true, message: "请输入名称", trigger: "blur" }],       },       dialogVisible: false,       data: [],       defaultProps: {         children: "children",         label: "name",       },       parentId: 0,       temp: {         id: undefined,         parentId: undefined, // 父id         mainProjectId: undefined, //项目id         name: undefined, // 名称         code: undefined, //编码         project: undefined,       },       id: undefined,       node_had: undefined,       resolve_had: undefined,     };   },   components: {},   mounted() {},   methods: {     handleNodeClick(data) {       //   this.expandedKeys = [];       //   this.expandedKeys.push(data.id);       this.$emit("data", data);     },     /**      * 懒加载事件      */     loadNode(node, resolve) {       this.node_had = node;       this.resolve_had = resolve;       if (node.level == 0) {         selectListByParentId(this.parentId).then((response) => {           return resolve(response.data.data);         });       } else if (node.level > 0) {         selectListByParentId(node.data.id).then((response) => {           return resolve(response.data.data);         });       }     },     // 添加传当前节点,编辑传父节点     refresh() {       let node = this.$refs.tree.getNode(this.id);       node.loaded = false;       node.expand();     },     open(node, data, type) {       // 添加       if (type == 1) {         this.restemp();         this.id = data.id;         this.temp.parentId = data.id;         this.temp.mainProjectId = data.mainProjectId;         this.temp.project = false;       } else {         // 编辑         this.temp = data;         this.id = node.parent.data.id;       }       this.dialogVisible = true;     },     // 提交数据     submit() {       this.$refs["form"].validate((valid) => {         if (valid) {           add(this.temp).then((res) => {             this.dialogVisible = false;             this.refresh();           });         } else {           console.log("error submit!!");           return false;         }       });     },     remove(node, data) {       if (node.childNodes.length > 0) {         this.$message.error("请从最后一级删除");         return false;       } else {         const parent = node.parent;         const children = parent.childNodes;         const index = children.findIndex((d) => d.id === data.id);         children.splice(index, 1);         remove(data.id).then((res) => {});       }     },     restemp() {       this.temp = {         id: undefined,         parentId: undefined, // 父id         mainProjectId: undefined, //项目id         name: undefined, // 名称         code: undefined, //编码       };     },   }, }; </script>
<style lang="scss" scoped> /deep/.custom-tree-node {   flex: 1;   display: flex;   align-items: center;   justify-content: space-between;   font-size: 14px;   padding-right: 8px; }
/deep/.el-tree-node__content {   height: 40px !important; } </style>

标签:node,resolve,undefined,temp,tree,element,移除,data,id
来源: https://www.cnblogs.com/xiaokangk/p/15253183.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有