ElementUI中el-tree节点的操作的实现

2023-07-31 13:06:03 71

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

html



得到节点id
添加节点
修改节点
删除节点







输入框















取消


确定

js代码




var_treeNode={
nodeId:0,
categoryName:"",
parentId:0
}

varapp=newVue({
el:'#app',
data:{
treeNode:_treeNode,
treeList:[],
treeListData:[],//无层级结构节点数据
defaultProps:{
children:'childList',
label:'name'
/*label:'categoryName'*/
},
dialogVisible:false,//对话框，默认不打开
api:{
treeDataList:"/category/treeList.do",//得到节点数据，无层级结构GET
saveTreeNode:"/category/saveTreeNode.do",//得到节点数据，无层级结构GET
deleteTreeNode:"/category/deleTreeNode.do",
}
},
methods:{
cateListFunction:function(){
$.ajax({
type:"get",
url:"/category/cateList.do",
success:function(result){
app.cateList=result;
app.treeList=result;
},error:function(result){
}
});
},
//点击节点名称触发的事件
handleNodeClick:function(data){
alert(data.id);
console.log(data);
},
//获得选中的节点的key
checkedKeys:function(data){
alert(JSON.stringify(this.$refs.tree.getCheckedKeys()));
},
//添加节点查询所有节点的方法
addNode:function(){
//查询所有节点数据无层级结构
app.getTreeNode();
app.dialogVisible=true;
},
//保存节点
saveNode:function(){
//alert(app.treeNode.categoryName+app.treeNode.parentId);
axios.post(app.api.saveTreeNode,app.treeNode).then(function(resule){
app.dialogVisible=false;
app.treeNode.parentId=0;
app.treeNode.categoryName="";
app.cateListFunction();
});

},
cancleSaveNode:function(){
app.dialogVisible=false;
app.treeNode.parentId=0;
app.treeNode.categoryName="";

},
//下拉框选中事件
selectChange:function(val){
//select控件的option绑定的值为节点的id,我们将值绑定在要添加的元素的父id
//alert("得到节点类型"+val);
},
//批量删除节点（若有子节点则不予删除）
deleteNode:function(){
app.getTreeNode();
varstr=[];
str=this.$refs.tree.getCheckedKeys();
if(str.length<=0){//因为vue返回的是选中的key的数组
//，如果没有选择任何元素返回"[]",这是两个元素，所以我们判断长度为2时，为空
app.$message.error("请至少选择一个节点");
return;
}
for(variinstr){
for(varjinapp.treeListData){
if(app.treeListData[j].parentId==str[i]){
app.$message.error("父节点不可被删除");
return;
}
}
}
axios.post(this.api.deleteTreeNode,str).then(function(result){
app.$message({message:'删除成功',type:'success'});
app.getTreeNode();
app.cateListFunction();
});

},getTreeNode:function(){
//查询所有节点数据无层级结构
axios.get(this.api.treeDataList)
.then(
function(result){
//vue给我们封装的得，我们所得到的数据在返回的对象的data属性里
app.treeListData=result.data;
});
}

},
created:function(){
this.getTreeNode();
this.cateListFunction();
}
});

controller

/**
*保存节点
*/
@RequestMapping("/saveTreeNode.do")
@ResponseBody
publicvoidsaveTreeNode(@RequestBodyTbCategorycategory){
System.out.println(category.getCategoryName()+"------"+category.getParentId());
categoryService.insert(category);
}


@RequestMapping("/deleTreeNode.do")
@ResponseBody
publicvoiddeleTreeNode(@RequestBodyStringstr){

System.out.println(str);
String[]strIds=str.substring(1,str.length()-1).split(",");
for(inti=0;i
以上代码真的没有什么好解释的，大家直接按照我的代码，就不会有问题了
截图：





到此这篇关于ElementUI中el-tree节点的操作的实现的文章就介绍到这了,更多相关ElementUIel-tree节点内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

ElementUI中el-tree节点的操作的实现

热门推荐

随机推荐