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