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