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

最新推荐文章于 2025-02-21 17:07:54 发布

kaolagirl

最新推荐文章于 2025-02-21 17:07:54 发布

阅读量1k

点赞数 1

分类专栏： workNode 文章标签：前端 vue elementui

本文链接：https://blog.csdn.net/kaolagirl/article/details/125909162

版权

workNode 专栏收录该内容

1 篇文章

订阅专栏

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()
    })
  },