大数据量树形数据表格展示, umy-ui,

已于 2023-04-12 10:57:40 修改
阅读量3.8k 收藏 3
点赞数 1
文章标签： vue.js javascript 前端 elementui
于 2023-04-11 14:46:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yingw1/article/details/129945953
版权

​前端树形表格展示通过使用umyui组件

​参考umyui官网的

一个基于 vue 的 PC 端表格UI库，解决万级数据渲染卡顿问题，过万数据点击全选卡顿等等问题。
博主也查阅过资料，也有使用过elementui中的table来实现，但是最后发现因为我的数据有几千条，使用elementui的table会造成浏览器的卡顿，不论是展示数据还是搜索都会使得页面非常卡顿，经过几次试错后，找到了umyui这个在vue基础上的table组件。
umyui链接
👇官网页面如下：我们可以看到基本的分布，这里我使用的是ux-grid这个组件，因为这边需要涉及到复选框，这个属性对有复选框的需求会比较好。推荐有复选框需求的可以使用这个。
在这里插入图片描述
给大家看看最终的效果

👉实现的效果

在这里插入图片描述
搜索这样的树形表格
总的来说，它和elemenyui的table是非常相似的，只需要把elementui的换成就可以了，注意一下里面的属性名称是否一样。
话不多说，来看代码:👇👇👇👇👇👇👇👇👇👇
💞🔥html代码：
要写成树形结构，必须设置row-id=‘id’,这里需要注意，与elementui的table不同，elementui是row-key,
其次，最重要的两个属性是tree-config和checkbox-config

checkbox-config复选框配置项———
checkField渲染速度更快（建议数据量大时使用，行数据中必须存在该字段，否则无效）string——
showHeader是否显示全选按钮boolean—true
checkAll默认勾选所有（只会在初始化时被触发一次）boolean—false
checkRowKeys默认勾选开指定行（只会在初始化时被触发一次，需要有 row-id）Array——
checkStrictly是否严格的遵循父子不互相关联的做法boolean—false
checkMethod是否允许勾选的方法，该方法 Function({row}) 的返回值用来决定这一行的 checkbox 是否可以勾选Array——
highlight高亮勾选行boolean—false
trigger触发方式stringdefault（默认）, cell（点击单元格触发）, row（点击行触发）default
tree-config树形结构配置项———
children树子节点的属性string—children
indent树节点的缩进number—20
expandAll默认展开所有子孙树节点（只会在初始化时被触发一次）boolean—false
expandRowKeys默认展开指定树节点（只会在初始化时被触发一次，需要有 row-id）string[]——
accordion对于同一级的节点，每次只能展开一个boolean—false
trigger触发方式stringdefault（点击展开按钮触发）, cell（点击单元格触发）, row（点击行触发）default
lazy是否使用懒加载（启用后只有指定 hasChild 的节点才允许被点击）boolean-false
hasChild只对 lazy 启用后有效，标识是否存在子节点，从而控制是否允许被点stringhasChild
loadMethod该方法 Function({ row }) 用于异步加载子节点, （必须返回 Promise<any[]>对象）Function--
reserve是否保留展开状态，对于某些场景可能会用到，比如数据被刷新之后还保留之前展开的状态（需要有 row-id）boolean-false
showIcon是否显示图标按钮boolean—true
iconOpen自定义展开后显示的图标 iconfont图标string——
iconClose自定义收起后显示的图标 iconfont图标string——
iconLoaded自定义懒加载中显示的图标 iconfont图标string——
line树节点的连接线（启用连接线）boolean—false
<ux-grid ref="plTreeTable" :data="tableData" fixed-columns-roll beautify-table header-drag-style :max-height="height" :checkbox-config="{highlight: false,showHeader:false,checkRowKeys:checkTreeArry,checkField:'courtTypeHidden'}"
			  @select="handleSelectRow" :tree-config="{ children: 'children',expandAll: false,expandRowKeys:currentExpand}"  row-id="id" border :key="keyCode">
		<ux-table-column  field="name" title="法院名称" :tree-node="true" min-width="15%" type="checkbox">
			<template slot-scope="scope">
				<span>{{scope.row.name}}</span>
			</template>
		</ux-table-column>
		<ux-table-column field="courtType" title="法院类型" align="center" min-width="15%"></ux-table-column>
		<ux-table-column field="courtRelationGood" title="关系很好" align="center" min-width="10%">
			<template slot="header" slot-scope="scope">关系很好
				<el-checkbox label="智能全选" v-model="checkedGood" style="color: #FF8100;display: block" @change="handleCheckedGood"></el-checkbox>
			</template>
			<template slot-scope="scope">
				<el-checkbox label="" v-if="scope.row.courtType"  v-model="scope.row.courtRelationGood" @change="handleCheckedGoodRow(scope.row)"></el-checkbox>
			</template>
		</ux-table-column>
		<ux-table-column field="courtRelationDefalut" title="关系一般" align="center" min-width="10%">
			<template slot="header" slot-scope="scope">关系一般
				<el-checkbox label="智能全选" v-model="checked" style="color: #FF8100;display: block" @change="handleCheckedDefalut"></el-checkbox>
			</template>
			<template slot-scope="scope">
				<el-checkbox label="" v-if="scope.row.courtType" v-model="scope.row.courtRelationDefalut" @change="handleRelationDef(scope.row)"></el-checkbox>
			</template>
		</ux-table-column>
		<ux-table-column field="courtRelationBad" title="关系很差" align="center" min-width="10%">
			<template slot="header" slot-scope="scope">关系很差
				<el-checkbox label="智能全选" v-model="checkedBad" style="color: #FF8100;display: block" @change="handleCheckedBad"></el-checkbox>
			</template>
			<template slot-scope="scope">
				<el-checkbox label="" v-if="scope.row.courtType" v-model="scope.row.courtRelationBad" @change="handleRelationBad(scope.row)"></el-checkbox>
			</template>
		</ux-table-column>
	</ux-grid>

🙌💥需要再第一列添加

:tree-node="true"和type=“checkbox”

在表头我们需要设置一个select选择事件，来记录我们选择了哪几行，以便保存到后台，给后台传递一个state是否选中的状态。
这里我是一层层来写的，大家可以写个递归。

   handleSelectRow(selection, row){
            if(row.children && row.children.length>0){
                    if(row.children && row.children.length>0){
                        row.children.forEach(c=>{
                            if(c.children && c.children.length>0){
                                c.children.forEach(r=>{
                                    if(r.children && r.children.length>0){
                                        r.children.forEach(_l=>{
                                            if(_l.state==0){
                                                _l.state=1
                                            }else {
                                                _l.state=0
                                            }
                                        })
                                    }else{
                                        if(r.state==0){
                                            r.state=1
                                        }else{
                                            r.state=0
                                        }
                                    }
                                })
                            }else{
                                if(c.state==0){
                                    c.state=1
                                }else{
                                    c.state=0
                                }
                            }
                        })
                    }else{
                        if(v.state==0){
                            v.state=1
                        }else{
                            v.state=0
                        }
                    }
                }else{
                row.state=!row.state
            }
            selection.forEach(v=>{
                this.$set(v,'state',true)
            })
            this.checkedAllNode=selection
            this.$refs.plTreeTable.loadData(this.tableData)
            // console.log(selection, row)
        },

对了，如果要设置默认展开和默认选中，可以设置expandRowKeys和checkRowKeys属性。

🙆下面来看搜索树形结构的逻辑（需要控制树形的展开和折叠）

input
👉先介绍一下需要用到的一些属性

size输入框尺寸只在 type!=“textarea” 时有效stringmedium / small / mini
prefix-icon输入框头部图标string——
placeholder输入框占位文本string——
clearable是否可清空boolean—false
value-key输入建议对象中用于显示的键名string—value
trigger-on-focus是否在输入框 focus 时显示建议列表boolean—true
fetch-suggestions返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它Function(queryString, callback)——
select点击选中建议项时触发选中建议项

👉html代码

<el-autocomplete class="inline-input" v-model.trim="searchForm.queryParam" size="small" value-key="courtName" :fetch-suggestions="querySearchInput" placeholder="请输入法院名称"
:trigger-on-focus="false" @select="handleSelect" suffix-icon="el-icon-search" clearable></el-autocomplete>

👊设置树形展开节点，就必须设置expand-row-keys属性，也必须要设置row-key=“id”，id字段可以自选，但最好可以设置为id

在搜索时，需要展开对应的树形节点，但是有时会出现更新不及时或者说是搜索后表格没有重新渲染，就需要设置 :key=‘’属性
我这里设置了一个:key=“keyCode” 在data中设置了 keyCode:‘keyCode’+new Date().getTime()会实时变化，但对于使用unyui组件的话，也可以使用组件自带的刷新渲染树。
👊刷新表格方法：我使用的是doLayout和loadData，大家根据需求自行设计

doLayout重新计算表格，如果传 true 则进行完整计算（对于某些特殊场景可能会用到，比如隐藏的表格、重新计算列宽…等）—
reloadData加载数据并清除所有状态（对于表格数据需要重载、局部递增的场景中可能会用到）data 返回一个Promise
loadData加载数据（对于表格数据需要重载、局部递增场景下可能会用到）data 返回一个Promise
reloadColumn加载列配置并恢复到初始状态（对于表格列需要重载、局部递增场景下可能会用到）columns
loadColumn加载列配置（对于表格列需要重载、局部递增场景下可能会用到）columns
refreshColumn刷新列配置（对于动态修改属性、显示/隐藏列等场景下可能会用到）—
reloadRow(rows, record, field)局部加载行数据并恢复到初始状态（对于行数据需要局部更改的场景中可能会用到）rows, record, field
		<el-table :data="tableData"   max-height="700"  size="small" style="width: 100%" ref="table" :key="keyCode"
					  header-cell-class-name="table-header-row"  row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :expand-row-keys="currentExpand.length>0?currentExpand:currentExpandSearchAyyay" >

👉js代码 实现模糊搜索

 /**
         * 获取所有的法院信息--所有的搜索数据
         * @param $table
         */
        querySearch(dataList){
            for(let i=0;i<dataList.length;i++){
                if(dataList[i].courtName){
                    this.allData.push(dataList[i])
                }
                if(dataList[i].children && dataList[i].children.length>0){
                    for(let j=0;j<dataList[i].children.length;j++){
                        if(dataList[i].children[j].courtName){
                            this.allData.push(dataList[i].children[j])
                        }
                        if(dataList[i].children[j].children && dataList[i].children[j].children.length>0){
                             this.querySearch(dataList[i].children[j].children)
                        }
                    }
                }
            }
        },
     /**
         * js搜索模糊查询
         * @param queryString
         * @param cb
         */
        querySearchInput(queryString, cb){
            var restaurants = this.allData;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return restaurant => {
                return (restaurant.courtName.toLowerCase().indexOf(queryString.toLowerCase())>=0);
            };
        },

搜索树形结构的展开与折叠以及定位到相应的展开节点

这里我有两个搜索内容，一个是类型一个是名称，搜索前先折叠展开的树节点，使用setTreeExpand方法展开相应的节点，接着计算pagingScrollTopLeft需要滚动的距离，这里我的定位还是不准确的，我觉得使用scrollToRow是最好的，但是不知道为什么我的这个方法没有用，对了，这里需要注意一点，这里重新计算表格使用doLayout的方法，loadData会使定位不起作用。

   search() {
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            let _this = this
            _this.$refs.plTreeTable.clearTreeExpand()
            _this.$refs.plTreeTable.pagingScrollTopLeft(0,0)
            _this.tableData.forEach(p => {
                if ((_this.searchForm.courtType && _this.searchForm.courtType == p.courtType)
                    && (_this.searchForm.queryParam && _this.searchForm.queryParam == p.name)) {
                    // _this.$refs.plTreeTable.setTreeExpansion(p, true)
                }
                if (p.children && p.children.length > 0) {
                    p.children.forEach(c => {
                        if ((_this.searchForm.courtType && _this.searchForm.courtType == c.courtType)
                            && (_this.searchForm.queryParam && _this.searchForm.queryParam == c.name)) {
                            _this.$refs.plTreeTable.setTreeExpand(p, true)

                        }
                        if((!_this.searchForm.courtType || _this.searchForm.courtType =='')
                            && (_this.searchForm.queryParam && _this.searchForm.queryParam == c.name)){
                            _this.$refs.plTreeTable.setTreeExpand(p, true)

                        }
                        if((_this.searchForm.courtType && _this.searchForm.courtType == c.courtType)
                            && (!_this.searchForm.queryParam || _this.searchForm.queryParam == '')){
                            _this.$refs.plTreeTable.setTreeExpand(p, true)
                            _
                        }
                        if (c.children && c.children.length > 0) {
                            c.children.forEach(r => {
                                if ((_this.searchForm.courtType && _this.searchForm.courtType == r.courtType)
                                    && (_this.searchForm.queryParam && _this.searchForm.queryParam == r.name)) {
                                    _this.$refs.plTreeTable.setTreeExpand(p, true)
                                    _this.$refs.plTreeTable.setTreeExpand(c, true)

                                }
                                if ((!_this.searchForm.courtType || _this.searchForm.courtType == '')
                                    && (_this.searchForm.queryParam && _this.searchForm.queryParam == r.name)) {
                                    _this.$refs.plTreeTable.setTreeExpand(p, true)
                                    _this.$refs.plTreeTable.setTreeExpand(c, true)

                                }
                                if ((_this.searchForm.courtType && _this.searchForm.courtType == r.courtType)
                                    && (!_this.searchForm.queryParam || _this.searchForm.queryParam == '')) {
                                    _this.$refs.plTreeTable.setTreeExpand(p, true)
                                    _this.$refs.plTreeTable.setTreeExpand(c, true)
                                }
                                if (r.children && r.children.length > 0) {
                                    r.children.forEach(_c => {
                                        if ((_this.searchForm.courtType && _this.searchForm.courtType == _c.courtType)
                                            && (_this.searchForm.queryParam && _this.searchForm.queryParam == _c.name)) {
                                            _this.$refs.plTreeTable.setTreeExpand(p, true)
                                            _this.$refs.plTreeTable.setTreeExpand(c, true)
                                            _this.$refs.plTreeTable.setTreeExpand(r, true)
                                        }
                                        if ((!_this.searchForm.courtType || _this.searchForm.courtType == '')
                                            && (_this.searchForm.queryParam && _this.searchForm.queryParam == _c.name)) {
                                            _this.$refs.plTreeTable.setTreeExpand(p, true)
                                            _this.$refs.plTreeTable.setTreeExpand(c, true)
                                            _this.$refs.plTreeTable.setTreeExpand(r, true)
                                        }
                                        if ((_this.searchForm.courtType && _this.searchForm.courtType == _c.courtType)
                                            && (!_this.searchForm.queryParam || _this.searchForm.queryParam == '')) {
                                            _this.$refs.plTreeTable.setTreeExpand(p, true)
                                            _this.$refs.plTreeTable.setTreeExpand(c, true)
                                            _this.$refs.plTreeTable.setTreeExpand(r, true)
                                        }
                                    })
                                }
                            })
                        }
                    })
                }
               loading.close()
            })
            _this.tableData.forEach((v,vi)=>{
                let n=0
                let res=_this.$refs.plTreeTable.isTreeExpandByRow(v)
                let resExpand=_this.$refs.plTreeTable.getTreeExpandRecords()
                resExpand.forEach(c=>{
                    if(c.type=='province'){
                        c.children.forEach((z,x)=>{
                            // if(z.courtType){
                            //     //高级
                            //     n++
                            // }

                            if(z.children && z.children.length>0){
                                    z.children.forEach((r,i)=>{
                                        if(r.courtType){
                                         // 中级
                                            if(r.name==this.searchForm.queryParam){
                                                n+=x
                                                n+=i
                                            }else{
                                                n++
                                            }
                                        }
                                        if(r.children && r.children.length>0){
                                            r.children.forEach((g,y)=>{
                                                if(g.courtType){
                                                    if(g.name==this.searchForm.queryParam){
                                                        n+=i
                                                        n+=x
                                                        n++
                                                        n+=y
                                                        return
                                                    }
                                                }
                                            })
                                        }

                                    })
                                }
                        })
                    }
                })
                console.log(n)
                if(resExpand.length==3){
                    //基层
                    if(res){
                        console.log(vi)
                        // _this.$refs.plTreeTable.scrollToRow(v)
                        _this.$refs.plTreeTable.pagingScrollTopLeft(vi*60+n*30,0)
                    }
                }else if(resExpand.length==1){
                    //高级
                    if(res){
                        console.log(vi,resExpand)
                        // _this.$refs.plTreeTable.scrollToRow(v)
                        _this.$refs.plTreeTable.pagingScrollTopLeft(vi*40+resExpand.length*40,0)
                    }
                }else if(resExpand.length==2){
                    //中级
                    if(res){
                        console.log(vi,resExpand)
                        // _this.$refs.plTreeTable.scrollToRow(v)
                        _this.$refs.plTreeTable.pagingScrollTopLeft(vi*60+n*30,0)
                    }
                }

            })
            // _this.$refs.plTreeTable.loadData(this.tableData)
            _this.$refs.plTreeTable.doLayout(true)
        },

好了，到这就结束了，感觉代码还是写的有点乱的，做完这个功能后感触最深的是需要提前选择对应的组件，这样可以事半功倍。
再见！🙈🙈🙈🙈🙈

冰冰-ying
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
umy-ui封装，支持虚拟加载
11-10
传统的表格组件会一次性渲染所有行，当数据量过大时，会导致页面加载慢，用户体验下降。而super-ux-table则解决了这个问题，它只渲染屏幕可见部分的数据，其余数据则在需要时按需加载，从而实现高性能的滚动体验。 ...
umy-ui:umy-ui，一套为开发者准备的基于Vue 2.0的桌面端组件库，完美解决表格万级数据渲染卡顿，编辑表格卡顿问题
03-18
umy-ui一套为开发者准备的基于Vue 2.0的桌面端组件库，完美解决表格万级数据渲染卡顿，编辑表格卡顿问题回答下那些看见umy-ui的React哈，首先不要去看UI两字，我们是想后续做更多组件。所以搞成UI库。你完全可以按需...
vue表格数据改变页面实时渲染_高效 Vue2.0 桌面端表格组件库Umy-UI
weixin_39633252的博客
11-30 984
今天给大家分享一款优秀的Vue流畅渲染大数据表格组件库UmyUI。umy-ui 基于 vue2.x 构建的高性能组件库。完美解决表格十万级大数据卡顿、编辑表格卡顿等问题。特色文档：涵盖umy-ui各个方面，给开发者方向指导和设计理念。组件：众多组件覆盖开发过程的各个需求，组件功能丰富，u-table组件解决表格万级数据渲染卡顿问题。布局：收集众多的常用页面和布局，减少开发者的重复工作。工具库：众多...
使用umy-ui的大数据量编辑表格（ux-grid）获取修改列进行提交
试着奔跑的菜鸟的博客
06-16 4066
umy-ui的ux-grid大数据编辑表格获取已修改的列数据
探索高效桌面前端开发：umy-ui，你的理想组件库
最新发布
gitblog_00019的博客
05-31 446
探索高效桌面前端开发：umy-ui，你的理想组件库 项目地址:https://gitcode.com/u-fish-bubble/umy-ui 项目介绍 umy-ui 是一款专为开发者打造的基于 Vue 2.0 的桌面端组件库。它的核心亮点在于集成的 pl-table 组件，该组件能够完美解决在处理万级数据时的渲染卡顿以及编辑表格时的性能问题。umy-ui 提供了简单易用的 API 和丰富的功能，...
umy-ui树形结构表格懒加载用法详解
qq_44161722的博客
07-27 1110
在做后台时，使用的iview组件库中的树形表格，但数据量过大时会导致页面卡死，借助umy-ui的虚拟表格完美解决了数据量大卡顿的问题。
使用u-table/ux-grid虚拟滚动解决el-table数据量大渲染卡的问题、及表格根据浏览器大小动态调整高度问题
金乌的博客
06-13 5248
u-table的使用方法和el-table没什么区别。这里必须加的两个属性，不加的话无法实现虚拟表格，页面一样会卡死，第一个，use-virtual 开启虚拟滚动，第二，个 height 必须限制高度，这两个不加就是普通表格，加了之后就是虚拟表格。若想根据浏览器大小动态设置表格高度，可以通过vuex将屏幕大小的数据存储起来，通过监听屏幕大小，动态设置表格高度。新建umy-ui.scss文件，并引入。表格高度根据浏览器屏幕高度变化。
elementui结合虚拟列表umy-ui使用
sisyphus0000的博客
02-20 1041
elementui结合虚拟列表umy-ui使用
前端开发踩坑笔记（2021-10）
一只洒鹿
11-10 4075
目录 1、由于子组件修改了从父组件读取的值而出现的报错 2、对于el-table表格多选的限制 ，限制多选可选的个数 3、提取数组对象的某个属性值，组成新的字符串或数组 4、两个el-table表格（横向可能有滑动）同时展示的情况如何控制两个表同时滚动 5、表格数据特别多的时候用el-table导致页面卡顿 6、 :nth-child()选择指定的某几项进行样式渲染 7、重写elment-ui样式的时候不起作用 8、判断某一个js对象中含有的键值的个数 9、 两个对象的合并Object.a
el-tree大量数据会导致dom渲染缓慢问题
qq_41920758的博客
06-13 1447
但如果在节点数量在万级以上会有明显的卡顿，若数据量在五万以上可能会导致el-tree假死的情况。注意此方法查询会导致dom渲染卡顿问题，也可以做成你可以做成懒加载的树，搜索查询某个节点时调用接口，让后端返回对应的路径。看看vue-easy-tree的效果。无卡顿，我们通过控制台可以看出，el-tree渲染了所有节点，而虚拟滚动只渲染了可视区域的节点。vue 实现 tree 树形大量数据的多功能虚拟滚动-Virtual Tree_Brad_chao的博客-CSDN博客_vue树形数据展示。
vbt-table:vue bigDate树表组件
03-15
欢迎来到vbt-Table :waving_hand: 一款基于element-ui（2.9.1）扩展的支持树形表格的大数据表格组件 :calendar:说明 渲染树形数据时，必须要指定row-key和isTreeTable属性，row中包含子级。 表的惰性属性为true与加载函数load。通过指定行中的hasChildren变量来指定该行是包含子例程。 children与hasChildren都可以通过tree-props配置。 大数据滚动渲染需指定isBigData属性，支持树形表格大数据。 其他用法和elment-ui的表组件一样 :game_die:新增表格属性 参数 说明 参数 类型 任选值 默认值 initParentFunc 用于初始化父级树形表格数据时处理数据 行，树数据 功能 - - formateChildFunc 展示子级树形表格数据时处理数据 行，parentRow，treeData 功能 - - isBi
45款超宽科技大屏数据可视化展示统计分析UI界面AI矢量分层模板.zip
09-11
本资源“45款超宽科技大屏数据可视化展示统计分析UI界面AI矢量分层模板”提供了针对不同行业的专业设计，包括智慧城市、智慧交通、大数据分析平台、智慧教育、保险金融、销售和能源等领域。这些模板是为超宽大屏定制...
三菱FX3U-4AD模块如何读出模拟量数据
03-16
在使用FX3U-4AD读取模拟量数据时，需要遵循一定的步骤和配置。下面将详细介绍这些步骤以及相关知识点。 1. **单元号的确认**： 在FX3U-4AD模块的安装中，需要为其分配一个单元号。这个单元号是从0到7的一个数字，...
文档图片表格结构识别算法-数据集(新).zip
06-16
文档图片表格结构识别算法是计算机视觉和自然语言处理领域中的一个重要课题，主要目的是从扫描的文档图像或截图中准确地提取表格数据，并理解其结构。这个数据集（"文档图片表格结构识别算法-数据集(新).zip"）可能...
如何实现一个高性能可渲染大数据的Tree组件
weixin_46837985的博客
09-22 899
点击上方“程序员黑叔”，选择“置顶或者星标”你的关注意义重大！作者：jayzouhttps://segmentfault.com/a/1190000021228976背景项目中需要渲染一...
vue大数据表格上万条数据，树型表格，解决el-table表格数据量过大渲染卡死的问题，使用umy-ui的大数据表格虚拟表格虚拟滚u-table解决。
海贼王某人的博客
09-19 6923
vue大数据表格上万条数据，树型表格，解决el-table表格数据量过大渲染卡死的问题，使用umy-ui的大数据表格虚拟表格虚拟滚u-table解决。，先看看效果吧，拿实例说话，直接渲染四万多条数据不分页，树形表格可以展开。
大数据量树形数据表格展示, 虚拟表格,el-table, umy-ui, 表格懒加载
wxl_小白的博客
09-03 5487
1. 出现的问题 要展示树形数据表格,根据当前点击的表格行去请求新的数据并展示, 基于这种情况遇到以下问题 1). 当树形表格数据层级大于五级且数据量较多时, 浏览器崩溃 2). 当数据条数展示超出500以上时页面明显卡顿, 加载越多越卡直到崩溃 2. 根据问题找出解决方案 开发使用vue + element-ui 框架 基于el-table 尝试解决方案 2.1 不使用树形表格数据, 对数据做平铺展示, 手动模拟树形数据的功能及相关数据处理 <template slot-scope="s
umy-ui 渲染十万条数据
07-11
对于渲染大量数据，可以考虑以下几种优化方式： 1. 虚拟滚动：使用虚拟滚动技术，只渲染可见区域内的数据，而不是将所有数据一次性渲染出来。这可以大幅减少渲染的时间和内存占用。 2. 分页加载：将数据分页加载，每次只加载当前页的数据，当用户滚动到下一页时再加载下一页的数据。这样可以提高页面的响应速度和用户体验。 3. 数据优化：对于大量数据，可以通过优化数据结构、压缩数据等方式减少数据的体积，从而加快渲染速度。 4. 批量更新：使用批量更新的方式进行渲染，而不是逐条更新。例如，可以将一批数据以数组的形式传递给渲染引擎，然后一次性进行渲染。 5. 懒加载：只在需要时才加载数据，而不是一次性加载所有数据。可以根据用户的操作或者滚动位置来触发加载。 以上是一些常见的优化方式，你可以根据具体情况选择适合的方法来提升渲染效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冰冰-ying

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值