资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

Element-uitree组件自定义节点的示例分析-创新互联

这篇文章将为大家详细讲解有关Element-ui tree组件自定义节点的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

成都创新互联公司于2013年创立,先为西华等服务建站,西华等地企业,进行企业商务咨询服务。为西华企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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




.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;
}

补充:下面看下使用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组件自定义节点的示例分析-创新互联
网站URL:http://cdkjz.cn/article/cdgoji.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220