element-tree組件簡單用法

前言：最近開發中用到element-tree組件，再次做個筆記記錄一哈，不喜勿噴！！！謝謝

1、在項目中我們需要用的層級有4級，超過以后就給個提示就行；每條數據上都有新增子級、刪除、修改

2、按照官網給的實例，每條數據后面都會跟上新增、刪除按鈕，自我定制：當鼠標移上去才顯示新增、刪除按鈕

　　　官網給的實例：

　　自己修改后：

3、修改當前數據的名稱、並上傳到后台，在重新從后台獲取到數據顯示在頁面上

以上問題就是寫這個文檔的目的！話不多說了   直接上代碼！

首先是html代碼

<el-tree ref="SlotTree" :data="setTree" :props="defaultProps" default-expand-all highlight-current :expand-on-click-node="false" :node-key="NODE_KEY">
        <div class="comp-tr-node" slot-scope="{ node, data }">
           <!-- 編輯狀態 -->
           <template v-if="node.isEdit">
              <el-input
                v-model="data.jgMc"
                autofocus
                size="small"
                :ref="'slotTreeInput'+data[NODE_KEY]"
                @blur.stop="handleInput(node, data)"
                @keyup.enter.native="handleInput(node, data)"></el-input>
            </template>
           <!-- 非編輯狀態 -->
           <template v-else>
            <!-- 名稱： 新增節點增加class（is-new） -->
            <span :class="[data[NODE_KEY] < NODE_ID_START ? 'is-new' : '', 'comp-tr-node--name']">
              <span>{{ data.jgMc }}</span>
            </span>
              <!-- 按鈕 -->
              <span class="comp-tr-node--btns">
                <!-- 新增 -->
                <el-button icon="el-icon-plus" size="mini" circle type="primary" @click="handleAdd(node, data)"></el-button>
                <!-- 編輯 -->
                <el-button icon="el-icon-edit" size="mini" circle type="info" @click="handleEdit(node, data)"></el-button>
                <!-- 刪除 -->
                <el-button icon="el-icon-delete" size="mini" circle type="danger" @click="handleDelete(node, data)"></el-button>
              </span>
           </template>
         </div>
      </el-tree>

接下來是css代碼（tree-box：是tree外層的div class名）

  .tree-box >>> .el-tree-node {
    line-height:45px;
  }
  .tree-box >>> .el-tree-node__content{
    height:45px;
    line-height:45px;
  }
  .comp-tr-top{
    margin-left:10%;
  }
  .comp-tr-node{
    height:45px;
  }
  .comp-tr-node >>> .is-new{
    font-weight: bold;
  }
  .comp-tr-node >>> .comp-tr-node--name{
    width:270px;
    display: inline-block;
    line-height: 45px;
  }
  .tree-box >>> .el-tree-node__expand-icon{
    font-size:26px;
  }
  .comp-tr-node--btns{
    opacity:0;
  }
  .el-tree-node__content:hover  .comp-tr-node--btns{
    opacity:1;
  }

　　最后是js代碼

data(){
      return{
        backupsMode:false,
        signTree:false,//判斷tree是新增還是修改
        setTree: [],// tree數據
        NODE_KEY: 'id',// id對應字段
        MAX_LEVEL: 4,// 設定最大層級
        NODE_ID_START: 0,// 新增節點id，逐次遞減
        startId: null,
        defaultProps: {// 默認設置
          children: 'jg',
          label: 'jgMc'
        },
        initParam: {// 新增參數
          jgMc: '請填寫備件庫名',
          pid: 0,
          children: []
        },
      }
    },

　　

      // 刪除節點
      handleDelete(_node, _data){
        console.log(_node, _data)
        // 判斷是否存在子節點
        if(_data.jg && _data.jg.length !== 0){
          this.$message.error("此節點有子級，不可刪除！")
          return false;
        }else{
          // 刪除操作
          let DeletOprate = () => {
            this.$refs.SlotTree.remove(_data)
            //這個可以填寫刪除當前數據的接口
          }
          // 二次確認
          let ConfirmFun = () => {
            this.$confirm("是否刪除此節點？","提示",{
              confirmButtonText: "確認",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              DeletOprate()
            }).catch(() => {})
          }
          // 判斷是否新增：新增節點直接刪除，已存在的節點要二次確認
          _data[this.NODE_KEY] < this.NODE_ID_START ? DeletOprate() : ConfirmFun()
        }
      },
      // 修改節點
      handleInput(_node, _data){
        console.log(_node, _data)
        if(_node.isEdit){
          this.$set(_node, 'isEdit', false)
          // 填寫修改節點的接口
        }
      },
      // 編輯節點
      handleEdit(_node, _data){
        console.log(_node, _data)
        if(!_node.isEdit){
          this.$set(_node, 'isEdit', true)
        }
        // 輸入框聚焦
        this.$nextTick(() => {
          if(this.$refs['slotTreeInput'+_data[this.NODE_KEY]]){
            this.$refs['slotTreeInput'+_data[this.NODE_KEY]].$refs.input.focus()
          }
        })
      },
      // 新增節點
      handleAdd(_node, _data){
        console.log(_node, _data)
        // 判斷層級
        if(_node.level >= this.MAX_LEVEL){
          this.$message.warning("當前已達到"+ this.MAX_LEVEL + "級，無法新增！")
          return false;
        }
        // 參數修改
        let obj = JSON.parse(JSON.stringify(this.initParam));// copy參數
        console.log(obj)
        obj.pid = _data.jgId;// 父id
        obj[this.NODE_KEY] = ++this.startId;// 節點id：逐次遞增id
        // 判斷字段是否存在
        if(!_data.jg){
          this.$set(_data, 'jg', [])
        }
        // 新增數據
        _data.jg.push(obj)
        // 展開節點
        // _node.expanded = true
        if(!_node.expanded){
          _node.expanded = true
        }
      },
      // 添加頂部節點
      handleAddTop(){
        let obj = JSON.parse(JSON.stringify(this.initParam));// copy參數
        obj[this.NODE_KEY] = ++this.startId;// 節點id：逐次遞增id
        this.setTree.push(obj)
        console.log(this.setTree)
      },