umy-ui树形结构表格懒加载用法详解

已于 2023-07-27 14:30:01 修改
阅读量1.3k 收藏 3
点赞数
文章标签： ui javascript 前端 vue
于 2023-07-27 11:27:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44161722/article/details/131955159
版权

效果图
在这里插入图片描述
在做后台时，使用的iview组件库中的树形表格，但数据量过大时会导致页面卡死，借助umy-ui的虚拟表格完美解决了数据量大卡顿的问题。

先放文档：http://www.umyui.com/umycomponent/u-table-column-api

安装

npm install umy-ui

引入

全局引入：在main.js中放入以下代码

  import Vue from 'vue';
  import UmyUi from 'umy-ui'
  import 'umy-ui/lib/theme-chalk/index.css';// 引入样式
  import App from './App.vue';

  Vue.use(UmyUi);

  new Vue({
    el: '#app',
    render: h => h(App)
  });

按需引入：

先安装 babel-plugin-component
npm install babel-plugin-component -D

在 .babelrc 中plugins添加：
{
  "plugins": [
    [
      "component",
      {
        "libraryName": "umy-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

在main.js中按需引入：（这里我只需要用到表格，所以只引入了表格，完整组件列表和引入方式可以查看官网）
import  UTable  from 'umy-ui'
Vue.use(UTable)

使用

<u-table
        style="margin-top: 10px;"
        ref="plTreeTable"
        fixed-columns-roll
        beautify-table
        header-drag-style
        :height="tableHeight"
        :treeConfig="{
          children: 'children',
          expandAll: false,
          lazy: true,
          load: load,
          hasChildren: 'hasChildren'}"
        @toggle-tree-expand="toggleTreeExpand"
        use-virtual
        row-id="id"
        row-key="id"
        border>
        <!--u-table大数据表格 你需要在列上指定某个列显示展开收起 treeNode属性-->
        <u-table-column
          :tree-node="true"
          prop="name"
          label="名称"
          :width="200"/>
          <!-- 表头，其中prop是需要显示的字段 -->
        <u-table-column
          v-for="item in columns16"
          :key="item.key"
          :prop="item.key"
          :label="item.title"
          :width="item.width"
          align="center"/>
          <!--这里是自己添加的右侧操作按钮，根据需求而定-->
        <u-table-column 
          :resizable="false"
          :width="120"
          align="center"
          label="操作">
          <template slot-scope="scope">
            <Button size="small" title="下级" icon="md-add-circle" @click="showModal(null, 4, '下级', scope.row.id)"></Button>
            <Button size="small" title="修改" icon="md-create" @click="showModal(scope.row.id, 2, '修改')"></Button>
            <Button size="small" title="删除" icon="md-trash" @click="removeTableHandle(scope.row)"></Button>
        </template>
        </u-table-column>
    </u-table>

	<script>
	export default {
		 data () {
	    	 return {
	    	 columns: [ // 表头数据
		        {
		          title: '编号',
		          key: 'id',
		          width: 140,
		        },
		        {
		          title: '关联科目',
		          key: 'glkmmc',
		          align: 'center',
		        },
		        {
		          title: '车型',
		          key: 'jzlx',
		          align: 'center',
		        },
		        {
		          title: '大类名称',
		          key: 'ctype',
		          align: 'center',
		        },
		        {
		          title: '描述',
		          key: 'des',
		          align: 'center',
		        },
		        {
		          title: '题目数量',
		          key: 'questcount',
		          align: 'center',
		        },
		      ],
		      data5: [], // 完整表格数据
		      data13: [], // 
	    	 }
    	 },
    	 mounted() {
    	 },
    	 methods:{
			async getTreeData(){ // 请求数据
		      let paramData = {
		        type: 'list',
		        service: 'xxx',
		        src: 'xxx',
		      };
		      const res = await this.$http(paramData);
		      if (res.code == 200 && res.success) {
		        this.data5 = JSON.parse(JSON.stringify(res.data)); // 存储完整数据用作展开子集懒加载时使用
		        this.data13 = res.data; // 这个是实际渲染出来的数据，先将子集置空，保证页面运行速度
		        this.data13.map(v=>{
		          if(v.children.length>0){
		            v.children = [];
		            v.hasChildren = true; // 在children 为空的情况下，添加 hasChildren 为true才会显示展开按钮
		          }
		        })
		        // 设置表格数据
		        this.$refs.plTreeTable.reloadData([ ...this.data13])
		      }
		    },
		    // 子集收起展开时触发
		    toggleTreeExpand (row, treeExpanded, event) {
		      // console.log(row, treeExpanded, event,'toggleTreeExpand')
		    },
		    load (row, resolve) { 
		      // row是当前点击的内容,拿到id再去找完整数据中对应的子集
		      var res  = this.data5.filter(v=>{
		        return v.id == row.id;
		      })[0];
		      setTimeout(() => {
		        if ( row.id ) {
		          resolve(res .children)
		        } 
		      }, 1000)
		    },
		 }
	}
	
</script>

可选择的树形表格

在这里插入图片描述

使用

    <u-table
      style="margin-top: 10px;"
      ref="plTreeTable"
      fixed-columns-roll
      beautify-table
      :height="tableHeight"
      header-drag-style
      :treeConfig="{
        children: 'children',
        expandAll: false,
        lazy: true,
        load: load,
        hasChildren: 'hasChildren'}"
      @selection-change="handleSelectionChange"
      use-virtual
      row-id="id"
      row-key="id"
      border>
      <u-table-column border-line type="selection" width="55" :selectable="selectable"/>
      <!--u-table大数据表格 你需要在列上指定某个列显示展开收起 treeNode属性-->
      <u-table-column
        :tree-node="true"
        prop="name"
        label="名称"
        :width="200"/>
      <u-table-column
        v-for="item in columns"
        :key="item.key"
        :prop="item.key"
        :label="item.title"
        :width="item.width"
        align="center"/>
    </u-table>

	<script>
	export default {
		 data () {
	    	 return {
	    	 columns: [ // 表头数据
		        {
		          title: '编号',
		          key: 'id',
		          width: 140,
		        },
		        {
		          title: '关联科目',
		          key: 'glkmmc',
		          align: 'center',
		        },
		        {
		          title: '车型',
		          key: 'jzlx',
		          align: 'center',
		        },
		        {
		          title: '大类名称',
		          key: 'ctype',
		          align: 'center',
		        },
		        {
		          title: '描述',
		          key: 'des',
		          align: 'center',
		        },
		        {
		          title: '题目数量',
		          key: 'questcount',
		          align: 'center',
		        },
		      ],
		      data5: [], // 完整表格数据
		      data13: [], // 
	    	 }
    	 },
    	 mounted() {
    	 },
    	 methods:{
			async getTreeData(){ // 请求数据
		      let paramData = {
		        type: 'list',
		        service: 'xxx',
		        src: 'xxx',
		      };
		      const res = await this.$http(paramData);
		      if (res.code == 200 && res.success) {
		        this.data5 = JSON.parse(JSON.stringify(res.data)); // 存储完整数据用作展开子集懒加载时使用
		        this.data13 = res.data; // 这个是实际渲染出来的数据，先将子集置空，保证页面运行速度
		        this.data13.map(v=>{
		          if(v.children.length>0){
		            v.children = [];
		            v.hasChildren = true; // 在children 为空的情况下，添加 hasChildren 为true才会显示展开按钮
		          }
		        })
		        // 设置表格数据
		        this.$refs.plTreeTable.reloadData([ ...this.data13])
		      }
		    },
		    load (row, resolve) { 
		      // row是当前点击的内容,拿到id再去找完整数据中对应的子集
		      var res  = this.data5.filter(v=>{
		        return v.id == row.id;
		      })[0];
		      setTimeout(() => {
		        if ( row.id ) {
		          resolve(res .children)
		        } 
		      }, 1000)
		    },
		    // index对应的行是否可选
		    selectable (row, index) {
		        // if (index==1) {
		      return true
		        // }
		    },
		    // 点击复选框按钮
		    handleSelectionChange(val){
		      this.chooseList = val; // 获取到点击的值
		    }
		 }
	}
	
</script>
以对_
关注
Python 接口并发测试详解
悦分享
10-23 7260
性能测试是通过自动化测试工具模拟多种正常、峰值及异常负载条件对系统的各项性能指标进行的测试。负载测试和压力测试都属于性能测试，两者可以结合进行。通过负载测试，确定在各种工作负载下系统的性能，目标是测试当负载逐渐增加时，系统各项性能指标的变化情况。压力测试是通过确定一个系统的瓶颈或者不能接受的性能点，来获得系统能提供的最大服务级别的测试。性能测试的重点是测试在并发条件下服务或系统的瓶颈所在，从而优化相关功能，可能涉及软件及硬件的多方面改进。由此可见，性能测试对整个产品非常重要，甚至可以决定一个产品是否能长久发
Python 基础 (-)
banghu8816的博客
09-28 2454
该笔记源自尚学堂,非原创 Python 单词是“大蟒蛇”的意思。但是龟叔不是喜欢蟒蛇才起这个名字，而是正在追剧：英国电视喜剧片《蒙提·派森的飞行马戏团》(Monty Python and the Flying Circus)。 使用 www.python.org 提供的 interactive shell 入门 Python · 特点 可读性强 可读性...
umy-ui使用手册
体验新模板
07-04 4827
支持大批量table长列表虚拟表格 项目直接安装 npm install umy-ui 在main.js中引用 import UmyUi from 'umy-ui' import 'umy-ui/lib/theme-chalk/index.css'// 引入样式 Vue.use(UmyUi) 列子： <template> <div class="content"> <el-button type="primary" @click="exportData">下载&l
umy-ui 开源项目使用手册
最新发布
gitblog_00415的博客
09-16 789
umy-ui 开源项目使用手册 项目地址:https://gitcode.com/gh_mirrors/umy/umy-ui 一、项目目录结构及介绍 umy-ui 是一个专为开发者打造的基于 Vue 2.0 的桌面端组件库，其设计旨在高效处理表格数据的渲染，特别是对于大规模数据集的流畅展示。下面是该项目的基本目录结构概述： . ├── components # 组件目录，包含了所有...
树形数据与懒加载
weixin_44445649的博客
09-29 2139
求助！！！ 想实现下图效果 ——————————我的实现—————————— 代码部分 <template> <el-table :data="users" highlight-current-row v-loading="loading" style="width: 100%;" row-key="id" :tree-props="{children: 'chi...
vue3+＜script setup＞+element-plus中的el-table树形数据与懒加载
m0_59642018的博客
12-11 1717
【代码】vue3++element-plus中的el-table树形数据与懒加载。
el-table树形数据与懒加载
AreYouOkLei的博客
06-05 1194
el-table树形数据与懒加载(后端返回每层字段不一致时统一为label )
element-plus的Table 表格之树形数据与懒加载
weixin_50975849的博客
05-11 1706
总结一下最近写的基础版树形表格的懒加载，本次实例的应用中，和后端同事沟通返回指定字段isChildren，让子节点表格绑定字段和父节点表格绑定字段能够灵活处理，同时还修改了表格的样式。🌍 由于博主还属于前期的前端开发小白，欢迎大家留言提出更好的意见，大家共同进步！🔮 本文由 【第四人称Alice】 原创，首发于 CSDN ✨✨✨。声明：博主的项目是vue3+ts，node版本18.18.2。
Table树形数据+懒加载
qq_33007465的博客
10-18 2885
vue实现table表格树形数据和懒加载
Cocos2d-x 2.x、3.x读书摘要（2016-6-25 07:18）
u010401391的专栏
02-08 1万+
20170326添加： 尽量使用最新的类,因为被遗弃的类一般都有功能和性能上的缺陷,所以不建议使用。 对于EditBox类，在2.2.6版本之前，在iOS 8上，如果单击输入，键盘弹出时，会发生界面偏移错误，出现黑色背景部分。关闭键盘时，界面偏移不回来了。 引擎3.5/2.2.6解决了这个Bug。 2.2.6版本中修复了iPhone6和iPhone6 Plus的一些BUG，支持苹果的64位架构。 ...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
qq_36609655的博客
07-02 1万+
第1章Html   Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签： 一、结构（固定的结构）   &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bod...
PHP 面试知识点整理归纳
热门推荐
PHP学习日志——地雷
09-05 1万+
全文已整理补充完毕，以后还会继续更新文章里面的错误，以及补充尚不完善的问题。 该篇文章是针对Github上wudi/PHP-Interview-Best-Practices-in-China资源的答案个人整理 lz也是初学者，以下知识点均为自己整理且保持不断更新，也希望各路大神多多指点，若发现错误或有补充，可直接comment，lz时刻关注着。 由于内容比较多，没有直接目录，请自行对照 Gi...
hibernate _类级别加载策略
weixin_34242509的博客
01-31 159
一：数据表||实体类1、数据库表数据1、Orders表 2、Customer表 2、实体类1、Orders实体类2、Customer实例类二：load(延迟加载) || get(普通加载)1、使用get方法进行查询1、openSession.get()加载时立即查询则会打印SQL语句2、使用load方法加载1、(默认)是执行时,不发生SQL语句,返回一个对象,使用该对象时才执行SQL查询 2、延...
element-ui table 树形数据与懒加载 点击某一个单元格展开数据
djh052900的博客
08-04 468
element-ui table 树形数据与懒加载 点击某一个单元格展开数据
el-Table表格树形数据懒加载
mao6666spirit的博客
03-27 1112
然后端配合给出适合的数据,然后把配置项写好,就可以直接渲染了。
element的Table表格组件树形数据与懒加载简单使用
weixin_41549971的博客
01-10 2356
element的Table表格组件树形数据与懒加载简单使用
Vue?elementUI实现树形结构表格与懒加载
菜鸟教程
04-27 2209
文章来源： 学习通http://www.jaxp.net/ 目录1、实现效果2、后端实现2.1 实体类2.2 数据库中的数据结构2.3 后端接口2.4 swagger测试后端结构功能是否正常3、前端实现3.1 页面中引入el-table组件3.2 实现效果1、实现效果 2、后端实现 2.1 实体类 @Data @ApiModel(description = "数据字典") @TableName("dict") public class Dict { private static final long
element el-table 树形数据、懒加载添加排序功能。懒加载数据同步更新
xia_zixin的博客
12-20 1945
表格自带的排序功能目前只针对第一级树结构，那么当我们想对整体树形数据来排序的时候就要经过特殊处理了。这里的问题在于不能直接拿到children来排序, 我们需要定义map来储存懒加载的数据。一定要有唯一标识，children的id不能与外层id相同。在data中加入一个map来用于存取数据
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值