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

 更新时间:2022-01-27 14:11:52   作者:佚名   我要评论(0)

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

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查询子数据列表
    @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测试后端结构功能是否正常

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>
  </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 实现效果

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

到此这篇关于Vue elementUI实现树形结构表格与懒加载的文章就介绍到这了,更多相关Vue elementUI内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
  • Vue组件库ElementUI实现表格加载树形数据教程
  • vue通过element树形控件实现树形表格
  • vue Element-ui表格实现树形结构表格
  • vue+element UI实现树形表格
  • vue elementUI table表格数据 滚动懒加载的实现方法

您可能感兴趣的文章:

相关文章

  • gojs实现蚂蚁线动画效果

    gojs实现蚂蚁线动画效果

    目录一、gojs 实现1. 绘图2. 虚线实现3. 让虚线动起来二、虚线及虚线动画背后的原理三、虚线的一些概念四、css 绘制边框虚线在绘制 dag 图时
    2022-01-27
  • Vue?elementUI实现树形结构表格与懒加载

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

    目录1、实现效果2、后端实现2.1 实体类2.2 数据库中的数据结构2.3 后端接口2.4 swagger测试后端结构功能是否正常3、前端实现3.1 页面中引入e
    2022-01-27
  • vue3+TypeScript+vue-router的使用方法

    vue3+TypeScript+vue-router的使用方法

    目录简单使用创建项目vue-cli创建vite创建安装vue-router创建/修改组件修改入口ts启动vue在浏览器中访问文件结构图片综合使用动态参数使用wa
    2022-01-27
  • JSscript标签有哪些属性

    JSscript标签有哪些属性

    JS script标签有哪些属性: charset:可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值因此这个属性很少有人用。def
    2022-01-27
  • 使用vue-video-player实现直播的方式

    使用vue-video-player实现直播的方式

    目录一、安装vue-video-player二、使用 vue-video-player课前准备:直播流协议https://www.cnblogs.com/yangchin9/p/14930874.html 摘要:在
    2022-01-27
  • vue3获取当前路由地址

    vue3获取当前路由地址

    正解 使用useRouter: // router的 path: "/user/:uid" <template> <div>user</div> <p>uid: {{ uid }}</p> </template> <script lang=
    2022-01-27
  • vue?请求拦截器的配置方法详解

    vue?请求拦截器的配置方法详解

    按如下步骤进行 1.request.js内容:http request请求拦截器和http response服务器响应拦截器配置 2.http.js内容:请求数据方式封装 3.utils.
    2022-01-27
  • Vue中textarea自适应高度方案的实现

    Vue中textarea自适应高度方案的实现

    目录隐藏的问题解决自适应高度的方案先给方案,Vue栈有需求的同学可以直接下载vue-awesome-textarea 隐藏的问题 抛开原生JS,框架的大部分UI
    2022-01-27
  • 如何利用React实现图片识别App

    如何利用React实现图片识别App

    先把效果图给大家放上来 个人觉得效果还行。识别不太准确是因为这个 app学习图片的时间太短(电脑太卡)。 (笔者是 window10) 安装运行
    2022-01-27
  • JavaScript的Set数据结构详解

    JavaScript的Set数据结构详解

    目录1.&ensp;什么是 Set2.&ensp;Set 构造函数2.1)&ensp;数组2.2)&ensp;字符串2.3)&ensp;arguments2.4)&ensp;NodeList2.5)&ensp; Set3.&ensp;
    2022-01-27

最新评论