当前位置： 首页>后端>正文

elemnt table 加载错 elementui表格懒加载

后端2024-04-26 23:35:30


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


1、实现效果

elemnt table 加载错 elementui表格懒加载,elemnt table 加载错 elementui表格懒加载_数据字典,第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;

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 数据库中的数据结构

elemnt table 加载错 elementui表格懒加载,elemnt table 加载错 elementui表格懒加载_数据字典_02,第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

elemnt table 加载错 elementui表格懒加载,elemnt table 加载错 elementui表格懒加载_elemnt table 加载错_03,第3张

service实现类


@Service
public class DictServiceImpl extends ServiceImpl<DictMapper, Dict> implements DictService {

//根据上级id查询子数据列表
@Override
public List<Dict> findChildData(Long id) {
    QueryWrapper<Dict> wrapper=new QueryWrapper<>();
    wrapper.eq("parent_id",id);
    List<Dict> list = baseMapper.selectList(wrapper);
    //向list集合中的每个dict对象中设置hasChildren
    list.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;
}

//根据上级id查询子数据列表
@Override
public List<Dict> findChildData(Long id) {
    QueryWrapper<Dict> wrapper=new QueryWrapper<>();
    wrapper.eq("parent_id",id);
    List<Dict> list = baseMapper.selectList(wrapper);
    //向list集合中的每个dict对象中设置hasChildren
    list.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测试后端结构功能是否正常

elemnt table 加载错 elementui表格懒加载,elemnt table 加载错 elementui表格懒加载_数据字典_04,第4张

3、前端实现

3.1 页面中引入el-table组件

list.vue


<template>
  <div class="app-container">

<el-table
  :data="list"
  style="width: 100%"
  row-key="id"
  border
  lazy
  :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>

<el-table
  :data="list"
  style="width: 100%"
  row-key="id"
  border
  lazy
  :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 实现效果

elemnt table 加载错 elementui表格懒加载,elemnt table 加载错 elementui表格懒加载_elemnt table 加载错_05,第5张

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



https://www.xamrdz.com/backend/3dq1935830.html

相关文章：