Vue elementUI implements tree structure table and lazy loading

 @Data
@ApiModel(description = "data dictionary")
@TableName("dict")
public class Dict {

    private static final long serialVersionUID = 1L;

    @ApiModelProperty(value = "id")
    private Long id;

    @ApiModelProperty(value = "creation time")
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    @TableField("create_time")
    private Date createTime;

    @ApiModelProperty(value = "update time")
    @TableField("update_time")
    private Date updateTime;

    @ApiModelProperty(value = "Logical deletion (1: deleted, 0: not deleted)")
    @TableLogic
    @TableField("is_deleted")
    private Integer isDeleted;

    @ApiModelProperty(value = "other parameters")
    @TableField(exist = false)
    private Map<String,Object> param = new HashMap<>();

    @ApiModelProperty(value = "superior id")
    @TableField("parent_id")
    private Long parentId;

    @ApiModelProperty(value = "name")
    @TableField("name")
    private String name;

    @ApiModelProperty(value = "value")
    @TableField("value")
    private String value;

    @ApiModelProperty(value = "encoding")
    @TableField("dict_code")
    private String dictCode;

    @ApiModelProperty(value = "Whether to include child nodes")
    @TableField(exist = false)
    private boolean hasChildren;

}

 //Query the sub-data list according to the parent id @ApiOperation(value = "Query the sub-data list according to the parent id")
    @GetMapping("findChildData/{id}")
    public Result findChildData(@PathVariable Long id){
        List<Dict> list = dictService.findChildData(id);
        return Result.ok(list);
    }

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

    //Query the sub-data list according to the parent id @Override
    public List<Dict> findChildData(Long id) {
        QueryWrapper<Dict> wrapper=new QueryWrapper<>();
        wrapper.eq("parent_id",id);
        List<Dict> list = baseMapper.selectList(wrapper);
        //Set hasChildren to each dict object in the list collection
        list.forEach(x->{
            Long dictId = x.getId();
            boolean isChild = this.isChildren(dictId);
            x.setHasChildren(isChild);
        });
        return list;
    }

    //Judge whether there is child data under id private boolean isChildren(Long id){
        QueryWrapper<Dict> wrapper=new QueryWrapper<>();
        wrapper.eq("parent_id",id);
        Integer count = baseMapper.selectCount(wrapper);
        return count > 0;
    }
}

 <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="Name" width="230" align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="Encoding" width="220">
        <template slot-scope="{row}">
          {{ row.dictCode }}
        </template>
      </el-table-column>
      <el-table-column label="value" width="230" align="left">
        <template slot-scope="scope">
          <span>{{ scope.row.value }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Creation time" 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:[], //data dictionary list array dialogImportVisible:false, //set whether the pop-up box pops up}
  },
  created() {
    this.getDictList(1)
  },
  methods:{
    //Data dictionary list 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>

 import request from '@/utils/request'

export default {
  //Data dictionary list dictList(id){
    return request({
      url: `/admin/cmn/dict/findChildData/${id}`,
      method: 'get'
    })
  },
}