使用ElementUI做树形懒加载

电玩女神 2022-09-12 01:52 170阅读 0赞

原始表结构

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Yqq5Yqb5aWL5paXR08_size_20_color_FFFFFF_t_70_g_se_x_16][]

查询全部一级目录,id=1的目录parent\_id=0,即该条数据是顶级根目录

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

@Override
        public List<Dict> findChlidData(Long id) {
            QueryWrapper<Dict> wrapper = new QueryWrapper<>();
            wrapper.eq("parent_id",id);
            List<Dict> dictList = baseMapper.selectList(wrapper);
            //向list集合每个dict对象中设置hasChildren
            for (Dict dict:dictList) {
                Long dictId = dict.getId();
                boolean isChild = this.isChildren(dictId);
                dict.setHasChildren(isChild);
            }
            return dictList;
        }

@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 boolean hasChildren;
    
    }

最重要的字段hasChildren, 与elementui需要的数据结构一致

使用table组件

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Yqq5Yqb5aWL5paXR08_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

<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>

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

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Yqq5Yqb5aWL5paXR08_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/ff3518f2d34a42e98e901e68107cf16c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5Yqq5Yqb5aWL5paXR08_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/e4a2e5ce48d048c197d5a517505c9111.png