Vue3 解决表格切换闪烁的问题

表格切换闪烁的原因：el-table-column 没有固定宽度，导致切换标签页时表格重新计算列宽产生视觉变化（闪烁形象）

    表格实际需求的分析：需要实现自动适应视窗宽度，表格至终不会有横向滚动条

    最佳解决方案：显式设置列宽 + 未尾占位空列

    1、显式设置列宽 width，解决表格来回切换出现的闪烁问题

    2、未尾占位空列，固定右侧，不设置列宽，让其自动适应视窗宽度，因为其是空列，视觉上不会造成闪烁，最终会填充满整个表格的右侧，因为表格有边框，不然显示会有空隙

<template>
  <el-table
    ref="tableRef"
    :data="localData"
    :border="false"
    highlight-current-row
    :header-row-style="{ height: `48px` }"
    style="width: 100%; height: 100%"
    row-key="id">
    <!--
    表格切换闪烁的原因：el-table-column 没有固定宽度，导致切换标签页时表格重新计算列宽产生视觉变化（闪烁形象）
    表格实际需求的分析：需要实现自动适应视窗宽度，表格至终不会有横向滚动条
    最佳解决方案：显式设置列宽 + 未尾占位空列
    1、显式设置列宽 width，解决表格来回切换出现的闪烁问题
    2、未尾占位空列，固定右侧，不设置列宽，让其自动适应视窗宽度，因为其是空列，视觉上不会造成闪烁，最终会填充满整个表格的右侧，因为表格有边框，不然显示会有空隙
    -->
    <el-table-column prop="name" label="名称" header-align="left" show-overflow-tooltip width="1300">
      <template #default="{ row }">
        <el-input v-model="row.name" clearable maxlength="100" show-word-limit @input="() => handleInput(row)" />
      </template>
    </el-table-column>
    <el-table-column label="操作" header-align="center" align="center" fixed="right" width="300">
      <template #default="{ row }">
        <!-- 保存按钮 -->
        <BasePreventReClickButtonEmit
          class="short-btn"
          type="primary"
          size="default"
          plain
          :disabled="!dirtyState[row.id]"
          @click="(event: MouseEvent, done: () => void) => handleSave(row, event, done)"
          >保存</BasePreventReClickButtonEmit
        >

        <!-- 取消按钮 -->
        <BasePreventReClickButtonEmit
          class="short-btn"
          type="info"
          size="default"
          plain
          :disabled="!dirtyState[row.id]"
          @click="(event: MouseEvent, done: () => void) => handleCancel(row, event, done)"
          >取消</BasePreventReClickButtonEmit
        >

        <!-- 删除按钮 -->
        <BasePreventReClickButtonEmit
          class="short-btn"
          type="danger"
          size="default"
          plain
          @click="(event: MouseEvent, done: () => void) => handleDelete(row, event, done)"
          >删除</BasePreventReClickButtonEmit
        >
      </template>
    </el-table-column>

    <!-- 未尾占位空列，固定右侧，不设置列宽，让其自动适应视窗宽度，因为其是空列，视觉上不会造成闪烁，最终会填充满整个表格的右侧，因为表格有边框，不然显示会有空隙 -->
    <el-table-column fixed="right" />

    <!-- 空数据时显示增加按钮 -->
    <template #empty>
      <el-button type="primary" :icon="Plus" circle @click="handleAdd" />
    </template>
  </el-table>
</template>