elementui tree的自定义渲染(tree不同层级图标不同)

一 说明:  功能开发,要求展示的数据树列表中,根节点为文件夹样式,子节点为文件样式,所以稍稍学习了elementui中的tree的渲染

二 效果展示:最终实现功能如下

三 代码展示:在做该功能点时,耽误一天之久,因本人很少涉及前端,所以对前端知识较为生疏,所以并不能讲的很透彻,作此笔记以备后用。

公司前端在elementUI的基础上略加封装,使得数据父子关系,不需要自己构造,所以无法讲解,(我也不知道elementUI本身是不是已经实现了该功能。)

<yufp-ext-tree ref="parameterSetTree" @node-click="nodeClickFn" :show-checkbox="false" :height="height":render-content="renderContent"
                           :data-url="treeListUrl" data-id="constId" data-label="constNm"
                           data-pid="parConstId" style="margin-top: 10px;" :highlight-current="true"
                           :filter-node-method="filterNode">
            </yufp-ext-tree>
 renderContent: function () {
                    var createElement = arguments[0];
                    var level = arguments[1].node.level;
                    if (level == 1) {
                        return createElement('span', [
                            createElement('i', {attrs: {class: 'el-icon-yx-folder'}}),
                            createElement('span', "     "),
                            createElement('span', arguments[1].node.label)
                        ]);
                    } else {
                        return createElement('span', [
                            createElement('i', {attrs: {class: 'el-icon-yx-file-text'}}),
                            createElement('span', "     "),
                            createElement('span', arguments[1].node.label)
                        ]);
                    }
                },
data-url 为查询树节点数据的url 简单的查询而已,返回一个List<Map<String,Object>>.

data-id="constId" data-label="constNm"data-pid="parConstId"分别是对应domain字段,主键,显示名字,父节点字段据此可以实现自动生成树吧


  • 5
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值