欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-01 08:41:42
工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content)渲染树代码如下~

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

<template>
 <div class="sortdiv">
  <el-tree :data="sortdata" draggable node-key="id" ref="sorttree" default-expand-all :expand-on-click-node="false" :render-content="rendercontent" :allow-drop="allowdrop">
  </el-tree>
  <el-button @click="getdata">获取数据</el-button>
 </div>
</template>
<script>
export default {
 name: 'sort',
 data() {
  return {
   sortdata: [
    {
     id: 1,
     label: '一级 1',
     checkitem: true,
     children: [
      {
       id: 4,
       label: '二级 1-1',
       checkitem: false
      },
      {
       id: 9,
       label: '二级 1-2',
       checkitem: false
      },
      {
       id: 10,
       label: '二级 1-3',
       checkitem: false
      }
     ]
    },
    {
     id: 2,
     label: '一级 2',
     checkitem: true,
     children: [
      {
       id: 5,
       label: '二级 2-1',
       checkitem: true
      },
      {
       id: 6,
       label: '二级 2-2',
       checkitem: true
      }
     ]
    },
    {
     id: 3,
     label: '一级 3',
     checkitem: true,
     children: [
      {
       id: 7,
       label: '二级 3-1',
       checkitem: true
      },
      {
       id: 8,
       label: '二级 3-2',
       checkitem: false
      }
     ]
    }
   ]
  };
 },
 methods: {
  // 是否允许拖拽
  allowdrop (draggingnode, dropnode, type) {
   if (draggingnode.parent === dropnode.parent) {
    return type !== 'inner'
   }
   else return false
  },
  //获取数据
  getdata () {
   let result = this.$refs['sorttree'].data;
   let sortrulesmaps = [];
   result.foreach((element, index) => {
    let item = null;
    if (element.checkitem) {
     if (element.children && element.children.length > 0) {
      item = {
       orderindex: index,
       sortfield: element.label,
       rule: ['others']
      };
      element.children.foreach(i => {
       if (i.checkitem) {
        item.rule.push(i.label);
       }
      });
      item.rule = item.rule.join('_');
     }
    }
    item && sortrulesmaps.push(item);
   });
  },
  //同级置顶功能
  totop(node, data) {
    let c = object.assign({}, data);
    if (node.parent.level === 0) {
     this.sortdata.unshift(c)
    } else {
     node.parent.data.children.unshift(c);
    }
    this.$refs['sorttree'].remove(data.id);
  },
  changenode(r, node, data) {
   data.checkitem = r;
  },
  //自定义内容
  rendercontent(h, { node, data }) {
   return (
    <span class="custom-tree-node">
     <span>{data.label}</span>
     <span>
      <el-checkbox
       v-model={data.checkitem}
       checked={data.checkitem}
       on-change={r => this.changenode(r, node, data)}
      />
      <el-button
       size="mini"
       type="text"
       on-click={() => this.totop(node, data)}
       style="color:#707375;margin-left:10px"
      >
       <i class="fa fa-arrow-up">置顶</i>
      </el-button>
     </span>
    </span>
   );
  }
 }
};
</script>
<style lang="scss">
.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;
}
</style>

补充:下面看下使用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组件自定义节点使用方法代码详解,希望对大家有所帮助