ElementUI中el-tree节点的操作

旧城等待， 2022-05-19 04:59 272阅读 0赞

其实tree的有些方法用起来是很方便的，  
this.$refs.tree.getCheckedKeys()；这个原生态的方法。官方文档上说的是，返回一个数组。有了这个方法，我们就可以得到选中的每个节点的id,拿到了id，那所有的问题就迎刃而解了。  
废话不多说，直接上代码

html

<div id="app">
       <el-row>
           <el-button @click="checkedKeys">得到节点id</el-button>
           <el-button @click="addNode">添加节点</el-button>
           <el-button @click="checkedKeys">修改节点</el-button>
           <el-button @click="deleteNode">删除节点</el-button>
           <br/>
           <br/>
    
            <el-tree
                      ref="tree"
                      :data="treeList"
                      :props="defaultProps"
                      @node-click="handleNodeClick"
                      show-checkbox=true
                      node-key="id"
                      :check-strictly="true"
                    >
            </el-tree>
           <el-input>输入框</el-input>
           <el-dialog title="添加"
                      :visible.sync="dialogVisible"
                    >
                <el-form ref="form">
                    <el-form-item label="节点父类型">
                    <el-select placeholder="请选择要添加节点的父节点" v-model="treeNode.parentId" @change="selectChange" >
                        <el-option label="根节点" :value="0"></el-option>
                        <el-option v-for="item in treeListData" :label="item.categoryName" :value="item.nodeId"></el-option>
                    </el-select>
                </el-form-item>
                        <el-form-item label="节点名称">
                            <el-input placeholder="请输入节点名称" v-model="treeNode.categoryName" style="width: 220px"></el-input>
                        </el-form-item>
            </el-form>
    
               <span>
                   <el-button @click="cancleSaveNode">
                       取消
                   </el-button>
                   <el-button @click="saveNode">
                       确定
                   </el-button>
               </span>
    
           </el-dialog>
    
       </el-row>
    
    </div>

/  
js代码

//  
controller

/** * 保存节点 */
        @RequestMapping("/saveTreeNode.do")
        @ResponseBody
        public void saveTreeNode(@RequestBody TbCategory category){
            System.out.println(category.getCategoryName() +"------" +category.getParentId());
            categoryService.insert(category);
        }
    
    
        @RequestMapping("/deleTreeNode.do")
        @ResponseBody
        public void deleTreeNode(@RequestBody String str){
    
            System.out.println(str);
            String [] strIds = str.substring(1,str.length()-1).split(",");
            for(int i =0;i<strIds.length;i++){
                categoryService.delete(Long.valueOf(strIds[i])); // 1,2
            }
        }

以上代码真的没有什么好解释的，大家直接按照我的代码，就不会有问题了

截图：  
![这里写图片描述][70]

![这里写图片描述][70 1]

![这里写图片描述][70 2]

[70]: /images/20220519/f7c9752d790646c5b9599839ec122eee.png
[70 1]: /images/20220519/b41d0c36b3784ec391b13b9e5afca6a4.png
[70 2]: /images/20220519/41452da379c747eaab941d70f738286d.png