vue-element-admin右侧内容数据量多时，el-menu侧边栏收缩/展开卡顿问题

问题

项目中使用的是vue-element-template
当右侧content内容比较多时，或者表格单页数据量展示较多时，左边侧边栏菜单收缩展开的功能就会很卡顿，体验十分差，看了issue有人提出bug，但是也没有人给出一个比较好的解决方案。

分析问题

本人遇到的是表格单页展示过多引起的菜单收缩卡顿，分析了一下原因是，js执行阻塞了css动画，el-table开启了自动撑开宽度，需要时间重新计算渲染（设置了min-width的或开启fit）

解决方案：

使用虚拟滚动方案，目前el-table是没有该功能的，可以使用第三方改造的table
去除收缩动画，不过有点生硬。。注释掉src/style/sidebar.scss文件下的 transition: margin-left .28s;transition: width 0.28s; 俩行代码。
数据延迟重新渲染，等动画完成后重新渲染
我发现src/style/sidebar.scss样式.main-container下的transition: margin-left .28s较卡，把它注释掉。接下来就是对tableData进行切割延迟重新渲染（只针对右侧是表格的情况下的解决方案，其他情况也可以用类似的方法）
我写了一个mixin，方便多个组件可以共用

import { mapGetters } from 'vuex'/* 优化菜单收缩卡顿 */
export const tableLoad = {data(){return {timeout:null}},computed:{...mapGetters(['opened'])//展开收起的状态},watch:{opened() {let len = this.catchData.length//catchData是tableData深拷贝出来的if(len<=10)returnthis.tableData.splice(10, len)//当切换收缩状态时，表格只展示10条if(this.timeout) clearTimeout(this.timeout)this.timeout = setTimeout(() => {//分几步展示剩余的数据if(len>50){//超过50条let data= this.tableData.concat(this.catchData.slice(10, 40))this.setData(data)this.timeout = setTimeout(()=>{let data= this.tableData.concat(this.catchData.slice(40, 60))this.setData(data)if(len>60){//超过60条this.timeout = setTimeout(()=>{let data= this.tableData.concat(this.catchData.slice(60, len))this.setData(data)clearTimeout(this.timeout)},500)}},1300)return}let data= this.tableData.concat(this.catchData.slice(10, len))this.setData(data)}, 500)}},methods:{setData(data){this.$set(this,'tableData',data )},},beforeDestroy(){clearTimeout(this.timeout)}
}

在所需页面导入示例

import { tableLoad } from '@/utils/mixin'
export default{mixins:[tableLoad],data(){return{tableData:[]catchData:[]}},methods:{getData(){//...this.tableData = arrthis.catchData = deepClone(arr);//自行写深拷贝方法}}
}

至此，问题解决，本人用的是方法3，虽然方法low，但是起码能用哈哈哈…

各位大佬，如有更好的解决方案，请踢我一脚

vue-element-admin右侧内容数据量多时，el-menu侧边栏收缩/展开卡顿问题相关推荐

Vue Element Admin 使用mock模块模拟数据
Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发更加独立自主,不会被服务端的开发所阻塞. vue-elem ...
vue element admin登录方式切换（密码登录或短信登录）
显示结果: 具体代码可以根据vue element admin源码进行更改,下面是页面代码 <el-form ref="loginForm" :model="log ...
vue+element+admin（初始化项目）
2022.10.17我接触到了vue+element+admin的使用,首先要安装node.jshttps://nodejs.org/zh-cn/download/.和githttps://git-s ...
[Word2019]笔记内容005：解决Office2019中word的严重卡顿问题
1 关于Word2019使用卡顿问题解决问题描述最近在进行毕设设计编写中,使用Word2019简直给我要气疯,归结主要原因就是经常性的卡死退出,比如说进行公式的插入.表格的绘制等情况,然后提示系统 ...
Vue Element Admin 用mock模块模拟数据
步骤简单一在 src/api/charts 中添加接口 , 方法名为 getindexMock import request from '@/utils/request'export func ...
后端使用SpringBoot和Jwt工具与Redis数据库+前端Vue Element Admin实现用户携带token的登录功能案例
登录功能描述: 前端输入对应的用户信息 ,在用户输入邮箱后点击发送按钮给邮箱发送验证码,拿取到验证填完之后,点击登录按钮给后端发送请求 ,后端接收到请求之后 ,第一步校验验证码,第二步校验用户名和密 ...
vue表单中批量导入功能_vue实战(11)——vue+element UI实现表格数据导出Excel功能
一.应用场景按照需求导出功能分为勾选批量导出及按照查询结果导出,考虑到接口操作导出的复杂性,因此实现了js控制导出的功能导出功能截图二.安装相关依赖 cnpm install --save xl ...
vue+element 动态加载数据，checkbox实现全选，不全选
效果图: 功能描述: 图中所展示数据,全是从服务器获取的数据动态加载,实现点击全选,不全选,加粗字体为父节点,后面为子节点. 数据结构: [{"children": [{" ...
vue element admin中发送请求和设置loading效果
需求:在表格数据加载完成前进入loading显示数据正在加载,数据加载完成后取消loading效果,axios的超时处理和异常的处理之后进行取消loading效果. 小编接下来就根据这个这个需求进行分 ...
Vue + Element UI 中国省市区数据三级联动
安装数据 npm install element-china-area-data 页面引入 import { provinceAndCityData, regionData, provinceAndC ...

vue-element-admin右侧内容数据量多时，el-menu侧边栏收缩/展开卡顿问题

问题

分析问题

解决方案：

vue-element-admin右侧内容数据量多时，el-menu侧边栏收缩/展开卡顿问题相关推荐

最新文章

热门文章