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