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

2020-06-16 06:50:50易采站长站整理

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();
var str=[];
str =this.$refs.tree.getCheckedKeys();
if(str.length<=0){ // 因为vue返回的是选中的key的数组
// ,如果没有选择任何元素返回 "[]",这是两个元素,所以我们判断长度为2时,为空
app.$message.error("请至少选择一个节点");
return ;
}
for(var i in str){
for(var j in app.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(