其實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程式碼

<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
    }
  }

以上程式碼真的沒有什麼好解釋的，大家直接按照我的程式碼，就不會有問題了

截圖：

到此這篇關於ElementUI中el-tree節點的操作的實現的文章就介紹到這了,更多相關ElementUI el-tree節點內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！