工作上使用到element-ui tree 组件，主要功能是要实现节点拖拽和置顶，通过自定义内容方法（render-content）渲染树代码如下~
<template> <div> <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> <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)} > <i>置顶</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组件自定义节点使用方法代码详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: