[JavaScript知识库]vue-table那些走过的坑

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;
  }