Element-ui tree组件自定义节点使用方法代码详解

工作上使用到element-ui tree 组件，主要功能是要实现节点拖拽和置顶，通过自定义内容方法（render-content）渲染树代码如下~

.sortDiv {
 .el-icon-caret-right:before {
  content: 'E604';
 }
}
.custom-tree-node {
 flex: 1;
 display: flex;
 align-items: center;
 justify-content: space-between;
 font-size: 14px;
 padding-right: 8px;
}

补充：下面看下使用element的自定义tree组件的实例代码

在使用elemnet-ui时，需要自定义tree的一些元素，采用 :render-content属性来进行渲染这些元素，但是官网给的例子有一点小坑，

 renderContent:function(createElement, { node, data, store }) {
 var self = this;
 return createElement('span', [
   createElement('span', node.label),
   createElement('span', {attrs:{
     style:"float: right; margin-right: 200px"
   }},[
     createElement('el-button',{attrs:{
size:"mini"
     },on:{
click:function() {
  console.info("点击了节点" + data.id + "的添加按钮");
  store.append({ id: self.baseId++, label: 'testtest', children: [] }, data);
}
     }},"添加"),
     createElement('el-button',{attrs:{
size:"mini"
     },on:{
click:function() {
  console.info("点击了节点" + data.id + "的删除按钮");
  store.remove(data);
}
     }},"删除"),
   ]),
 ]);
      }

总结

以上所述是小编给大家介绍的Element-ui tree组件自定义节点使用方法代码详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！