树形表格与懒加载

• 1、实现效果
• 2、后端实现
• • 2.1 实体类
  • 2.2 数据库中的数据结构
  • 2.3 后端接口
  • 2.4 swagger测试后端结构功能是否正常
• 3、前端实现
• • 3.1 页面中引入el-table组件
  • 3.2 实现效果

1、实现效果

2、后端实现

2.1 实体类

@Data
@ApiModel(description = "数据字典")
@TableName("dict")
public class Dict {private static final long serialVersionUID = 1L;@ApiModelProperty(value = "id")private Long id;@ApiModelProperty(value = "创建时间")@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")@TableField("create_time")private Date createTime;@ApiModelProperty(value = "更新时间")@TableField("update_time")private Date updateTime;@ApiModelProperty(value = "逻辑删除(1:已删除，0:未删除)")@TableLogic@TableField("is_deleted")private Integer isDeleted;@ApiModelProperty(value = "其他参数")@TableField(exist = false)private Map<String,Object> param = new HashMap<>();@ApiModelProperty(value = "上级id")@TableField("parent_id")private Long parentId;@ApiModelProperty(value = "名称")@TableField("name")private String name;@ApiModelProperty(value = "值")@TableField("value")private String value;@ApiModelProperty(value = "编码")@TableField("dict_code")private String dictCode;@ApiModelProperty(value = "是否包含子节点")@TableField(exist = false)private boolean hasChildren;}

  上面必须包含一个hasChildren属性，即使数据库中没有该属性，这是element框架要求的。

2.2 数据库中的数据结构

2.3 后端接口

  如果完全用后端实现的话，那写个递归把所有数据按照层次结构查询完并封装好即可。但element的table组件给我们封装好了一些东西，我们只需要在这里根据上级id查询子数据列表即可。

controller代码：

 //根据上级id查询子数据列表@ApiOperation(value = "根据上级id查询子数据列表")@GetMapping("findChildData/{id}")public Result findChildData(@PathVariable Long id){List<Dict> list = dictService.findChildData(id);return Result.ok(list);}

service

service实现类

@Service
public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictService {//根据上级id查询子数据列表@Overridepublic List<Dict> findChildData(Long id) {QueryWrapper<Dict> wrapper=new QueryWrapper<>();wrapper.eq("parent_id",id);List<Dict> list = baseMapper.selectList(wrapper);//向list集合中的每个dict对象中设置hasChildrenlist.forEach(x->{Long dictId = x.getId();boolean isChild = this.isChildren(dictId);x.setHasChildren(isChild);});return list;}//判断id下面是否有子数据private boolean isChildren(Long id){QueryWrapper<Dict> wrapper=new QueryWrapper<>();wrapper.eq("parent_id",id);Integer count = baseMapper.selectCount(wrapper);return count > 0;}
}

2.4 swagger测试后端结构功能是否正常

3、前端实现

3.1 页面中引入el-table组件

list.vue

<template><div class="app-container"><el-table:data="list"style="width: 100%"row-key="id"borderlazy:load="getChildrens":tree-props="{children: 'children', hasChildren: 'hasChildren'}"><el-table-column label="名称" width="230" align="left"><template slot-scope="scope"><span>{{ scope.row.name }}span>template>el-table-column><el-table-column label="编码" width="220"><template slot-scope="{row}">{{ row.dictCode }}template>el-table-column><el-table-column label="值" width="230" align="left"><template slot-scope="scope"><span>{{ scope.row.value }}span>template>el-table-column><el-table-column label="创建时间" align="center"><template slot-scope="scope"><span>{{ scope.row.createTime }}span>template>el-table-column>el-table>div>template><script>
import dict from '@/api/dict'
export default {name: 'list',data(){return{list:[], //数据字典列表数组dialogImportVisible:false,  //设置弹框是否弹出}},created() {this.getDictList(1)},methods:{//数据字典列表getDictList(id){dict.dictList(id).then(response=>{this.list=response.data})},getChildrens(tree, treeNode, resolve) {dict.dictList(tree.id).then(response => {resolve(response.data)})},}
}
script><style scoped>style>

  上面关键的方法是getChildrens这个方法，在每一层调用后端接口将子节点数据查询出来，并加入树形结构的表格数据中。

调用后端结构的工具js文件 dict.js

import request from '@/utils/request'export default {//数据字典列表dictList(id){return request({url: `/admin/cmn/dict/findChildData/${id}`,method: 'get'})},
}

3.2 实现效果

  前后端测试都没有问题，由于使用的是懒加载，只有去点击父节点的时候，子节点的数据才会被加载，避免因数据量太大导致系统卡顿。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！