ElementUI中el-tree節點的操作
阿新 • • 發佈：2019-02-19
其實tree的有些方法用起來是很方便的，
this.$refs.tree.getCheckedKeys()；這個原生態的方法。官方文件上說的是，返回一個數組。有了這個方法，我們就可以得到選中的每個節點的id,拿到了id，那所有的問題就迎刃而解了。
廢話不多說，直接上程式碼
html
<div id="app">
<el-row>
<el-button @click="checkedKeys">得到節點id</el-button>
<el-button @click="addNode"> /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
js程式碼
<script type="text/javascript">
var _treeNode={
nodeId:0,
categoryName:"",
parentId:0
}
var app = new Vue({
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();
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(
function(result){
// vue給我們封裝的得，我們所得到的資料在返回的物件的data屬性裡
app.treeListData=result.data;
});
}
},
created: function () {
this.getTreeNode();
this.cateListFunction();
}
});
</script>
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
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
}
}以上程式碼真的沒有什麼好解釋的，大家直接按照我的程式碼，就不會有問題了
截圖：
