一 说明: 功能开发,要求展示的数据树列表中,根节点为文件夹样式,子节点为文件样式,所以稍稍学习了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字段,主键,显示名字,父节点字段据此可以实现自动生成树吧