表格多列情况下,loading不显示问题

问题描述:

        用element plus 做得表格,如下图,列数较多,且部分表格内容显示比较复杂,数据量中等的情况下,有一个switch 按钮,切换部分列的显示和隐藏,会发现,切换为显示的时候,会出现明显的卡顿,switch 也会明显卡顿一会之后,才显示成高亮状态。

        这是由于表格渲染的列比较多,且部分内容比较复杂,即使数据量算不上多,但渲染出来的DOM数量不少导致的,不过好在这里渲染卡顿不算严重,所以这里没做虚拟表格之类的优化。打算做个loading动画,在切换的时候,显示loading,让用户不会认为点了之后没反应。但加了loading之后,发现切换时loading显示不出来,应该是表格占用了渲染的主进程导致的。

        switch切换的时候,就会触发表格重新渲染了,这个问题不太好解决。后想到一种相对可行的方案,如下:

1、将原本绑定isAll (原本控制列是否显示的变量) 变量的switch改成绑定另一个变量fakeIsAll

<el-switch
   v-model="fackIsAll"
   active-text="查看全部"
   inactive-text="固定列"
   @change="toggleViewAll"
/>

2、通过setTimeout, 等switch状态切换完,loading显示后,再将fakeIsAll的值赋值给isAll.

const fakeIsAll = ref(false)
function toggleViewAll(){
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0)',
    })
    setTimeout(()=>{
      loading.close()
    },1000)
    setTimeout(() => {
      
      isAll.value = fakeIsAll.value
    }, 500);
  }

这样优化后,switch能马上切换状态,loading也能显示出来,不足之处在于,表格渲染期间,loading还是会卡顿。

不做虚拟表格优化的情况下,道友们时候有更好的方法,欢迎讨论。。。。

在iview的表格组件中,`getRowClassName` 是一个列级别的自定义CSS类名函数,它可以让你为每一行动态地添加额外的CSS样式,包括但不限于展开行、加载状态等。如果你希望表格的默认加载状态不是预加载所有数据,而是需要用户滚动到某一位置时才开始加载,iview并没有直接提供内置的“按需加载”功能,但它可以通过一些组合使用的方式模拟这种效果。 首先,你需要在`Table`组件上禁用默认的分页或者懒加载(`lazy`或`load-on-demand`)。然后,在`getRowClassName` 函数中,你可以检测当前行的索引是否在已加载数据范围内。如果不在,可以触发异步请求加载下一页数据。 下面是一个简化的例子: ```html <template> <Table :data="loadedData" :loading="isLoading" ref="table" :getRowClassName="getRowClass" :load="loadMore"> <!-- ... 其他表头和列配置 ... --> </Table> </template> <script> export default { data() { return { loadedData: [], // 已加载的数据 isLoading: false, currentPage: 0, // 当前页面数 pageSize: 10, // 每页展示的条数 }; }, methods: { loadMore() { this.currentPage++; this.fetchData(); // 异步加载更多数据 }, fetchData() { this.isLoading = true; // 显示加载中状态 setTimeout(() => { // 这里假设你有一个异步获取数据的函数 const newData = ...; // 联网拉取的新数据 this.loadedData = [...this.loadedData, ...newData]; this.isLoading = false; // 加载完成,设置为false }, 1500); // 模拟网络延迟 }, getRowClass({ row, rowIndex }) { if (rowIndex >= this.currentPage * this.pageSize && rowIndex < (this.currentPage + 1) * this.pageSize) { return { 'loading-row': true }; // 如果索引在当前页内,则加上 loading-row 类名 } return ''; }, }, }; </script> ``` 在这个例子中,`getRowClass`检查行索引,如果在加载范围,就添加 `loading-row` 类名,使得对应行显示加载中的样式。当你滚动到底部时,`loadMore`方法会被调用,进一步触发`fetchData`异步加载新数据。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值