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字段,主键,显示名字,父节点字段据此可以实现自动生成树吧


猜你喜欢

转载自blog.csdn.net/liuhua121/article/details/80061392