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

工作上使用到element-uitree组件，主要功能是要实现节点拖拽和置顶，通过自定义内容方法（r

工作上使用到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组件自定义节点使用方法代码详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！