Vue elementUI实现树形结构表格与懒加载

更新时间:2023-04-04 11:33:26 阅读：评论：0

1、实现效果

2、后端实现

2.1 实体类

@data@apimodel(description = "数据字典")@tablename("dict")public class dict {    private static final long rialversionuid = 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 = fal)    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 st一片冰心在玉壶的全诗ring dictcode;    @apimodelproperty(value = "是否包含子节点")    @tablefield(exist = fal)    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 = dictrvice.findchilddata(id);        return result.ok(list);    }

rvice

rvice实现类

@rvicepublic class dictrviceimpl extends rviceimpl<dictmapper, dict> implements dictrvice {    //根据上级id查询子数据列表    @override    public list<dict> findchilddata(long id) {        querywrapper<dict> wrapper=new querywrapper<>();        wrapper.eq("parent_id",id);        list<dict> list = bamapper.lectlist(wrapper);        //向list集合中的每个dict对象中设置haschildren        list.foreach(x->{            long dictid = x.getid();            boolean ischild = this.ischildren(dictid);            x.thaschildren(ischild);        });        return list;    }    //判断id下面是否有子数据    private boolean ischildren(long id){        querywrapper<dict> wrapper=new querywrapper<>();        wrapper.eq("parent_id",id);非主流图片男生        integer count = bamapper.lectcount(wrapper);        return count > 0;    }}

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

3、前端实现

3.1 页面中引入el-table组件

list.vue

<template>  <div class="app-container">    <el-table      :data="l诗经中的颂指的是ist"      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:fal,  //设置弹框是否弹出    }  },  created() {    this.getdictlist(1)  },  methods:{    //数据字典列表    getdictlist(id){      dict.dictlist(id)        .then(respon=>{            this.list=respon.data        })    },    getchildrens(tree, treenode, reso美宝莲隔离霜lve) {      dict.dictlist(tree.id).then(respon => {        resolve(respon.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'    })  },}