el-table使用时，动态赋值会出现闪烁的问题

Posted 2023-04-30

参考技术A 使用el-table实现列表时，因为每次都是清空后再重新赋值的，出现了闪烁的问题，整个页面会抖动，也就是el-table会出现暂无数据的效果，解决方案就是，在请求数据前不要清空数组的数据，而是请求成功后，再清空再赋值。
vue+element+el-table渲染数据闪烁

在开发中使用el-table宽度不一致出现抖动问题

1. 问题

点击来回切换时，由于表格列数不一样，会出现抖动的情况

2. 源代码

<template>
  <div class="check-list">
    <section class="fbetween">
      <div>
        <el-radio-group v-model="type" @change="(value)=> handleSearch() ">
          <el-radio-button :label="0">审核中</el-radio-button>
          <el-radio-button :label="2">审核失败</el-radio-button>
        </el-radio-group>
      </div>
    </section>

    <!-- 表格 -->
    <div class="option-table mgt_20" v-loading="loading">
      <el-table :data="tableData" border @selection-change="tableSelect" ref="i-table">
        <el-table-column type="selection" width="50" align="center"></el-table-column>
        <el-table-column v-for="item in column" :key="item.id" align="center" :prop="item.prop" :label="item.label" :min-width="item.width" show-overflow-tooltip>
          <template slot-scope=" row ">
            <template v-if="item.prop == 'businessLicenseUrl'">
              <div class="license-box fcc">
                <el-image class="img" :src="row[item.prop] || ''" :preview-src-list="[row[item.prop]]"></el-image>
                <div class="pre-icon pointer">
                  <i class="el-icon-zoom-in icon"></i>
                </div>
              </div>
            </template>
            <template v-else-if="item.prop == 'auditStatus'">
              <span>auditStatusList[row[item.prop]]</span>
            </template>
            <span v-else>row[item.prop] || '-'</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" fixed="right" width="220">
          <template slot-scope="row">
            <el-button type="text">查看详情</el-button>
            <el-button type="text">通过</el-button>
            <el-button type="text" class="rejectBtn">拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default 
  components:  InsDetail, RejectDialog, Pagination ,
  data() 
    return 
      type: 0,
      tableData: [],
      loading: false,
      selectedIds: [],
    
  ,
  computed: 
    column() 
      const res = [
         id: 1, label: '机构ID', prop: 'id', width: '120', type: [0, 2] ,
         id: 2, label: '机构名称', prop: 'name', width: '120', type: [0, 2] ,
         id: 3, label: '营业执照', prop: 'businessLicenseUrl', width: '150', type: [0, 2] ,
         id: 4, label: '联系人', prop: 'userName', width: '120', type: [0, 2] ,
         id: 5, label: '联系电话', prop: 'userPhone', width: '200', type: [0, 2] ,
         id: 6, label: '联系人邮箱', prop: 'userEmail', width: '200', type: [0, 2] ,
         id: 7, label: '行业技术领域', prop: 'domainField', width: '150', type: [0, 2] ,
         id: 8, label: '提交入驻申请时间', prop: 'createTime', width: '200', type: [0, 2] ,
         id: 9, label: '审核状态', prop: 'auditStatus', width: '150', type: [0, 2] ,
         id: 10, label: '审核失败回复', prop: 'remark', width: '150', type: [2] ,
      ]
      return res.filter(item => item.type.includes(this.type));
    
  ,
  
  mounted() 
    this.getData();
  ,
  methods: 
     async getData() 
     //通过接口获取表格数据
     
  

3.解决方法

  //解决表格抖动问题
  beforeUpdate() 
    this.$nextTick(() => 
      this.$refs['i-table'].doLayout()
    )
  ,