vue-table那些走过的坑---持续更新

本文档主要介绍了在Vue中解决动态添加表格列导致的顺序错乱及fixed布局显示异常的问题。通过$nextTick调用doLayout方法重新编排表格布局,并利用loading属性和延时器避免闪烁。同时,针对fixed状态下滚动条无法滚动的问题,通过调整z-index解决了无法点击的故障。
摘要由CSDN通过智能技术生成

1.解决动态添加表格列顺序错乱

// 等待dom更新将表格进行重新编排 
this.$nextTick(() => {
          this.$refs.table.doLayout()
          
  })

2.动态添加表格列 fixed布局错乱

// 1.el-table身上加上loading属性
  <el-table
            ref="table"
            v-loading="loading"
            :element-loading-text="$t('sys.loading2')"
            element-loading-spinner="el-icon-loading"
            :data="tableData"
            border
            stripe
            :header-cell-style="{ background: '#F5F7FA' }"
            align="center"
            style="width: 98%; margin: 0 auto"
            height="100%"
    >
// 2.适当时机开启loading搭配dolayout将布局重新编排,如若不使用loading遮罩效果会出现闪屏的bug
//  防止闪屏被用户看到 我们可以稍微设置延时器进行延迟loading
    this.$nextTick(() => {
          this.$refs.table.doLayout()
          setTimeout(() => {
            this.tableDivLoading = false
          }, 15)
        })

// 3.修改loading 遮罩层样式 
//   我这里使用的scss  less请使用/deep/
  
::v-deep .tableDiv  .el-loading-mask{
  height: auto;
  width: auto;
  top: 0;
  left: 0;
  background-color: #fff;
  }

3.fixed状态下滚动条无法滚动


// 解决fixed下滚动条不能点击
::v-deep .el-table--scrollable-x .el-table__body-wrapper {
    z-index: 1;
  }

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值