Element-uitree组件自定义节点的示例分析-创新互联
这篇文章将为大家详细讲解有关Element-ui tree组件自定义节点的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联公司于2013年创立,先为西华等服务建站,西华等地企业,进行企业商务咨询服务。为西华企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content
)渲染树代码如下~
获取数据
补充:下面看下使用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组件自定义节点的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
网站栏目:Element-uitree组件自定义节点的示例分析-创新互联
文章出自:http://ybzwz.com/article/cdgoji.html