前言

在使用el-table时，动态设置column时，使用v-if时会出现抖动问题(v-show无效)，造成这种情况的原因是因为在每次渲染时，Vue 会重新创建和销毁 DOM 元素，导致表格内容的重新布局和渲染

方案1

使用**:span**来动态控制表单的列

<template>
  <el-form :model="formData" :rules="formRules">
    <el-form-item label="Column 1" :span="getColumnSpan('column1')">
      <el-input v-model="formData.column1"></el-input>
    </el-form-item>
    <el-form-item label="Column 2" :span="getColumnSpan('column2')">
      <el-input v-model="formData.column2"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        column1: '',
        column2: ''
      },
      formRules: {
        // 表单验证规则
      },
      displayedColumns: ['column1', 'column2'], // 初始显示的列
      columnWidths: {
        column1: 12,
        column2: 12
      }
    };
  },
  methods: {
    getColumnSpan(column) {
      return this.displayedColumns.includes(column) ? this.columnWidths[column] : 0;
    },
  },
};
</script>

方案2

给每个列一个key ，是每次重新渲染来判断一下是否需要重新渲染

<el-table-column type="selection" width="55" align="center" :key="new Date().getTime()+1"/>
      <el-table-column label="序号" type="index" align="center" width="50" :key="new Date().getTime()+2" />
      <el-table-column label="天数" align="center" prop="date" v-if="activeName === '0'" :key="new Date().getTime()+3"/>
      <el-table-column label="开始天数" align="center" prop="sss" v-else :key="new Date().getTime()+4" />
      <el-table-column label="结束天数" align="center" prop="ss" v-if="activeName === '1'"  :key="new Date().getTime()+5"/>
      <el-table-column label="奖励种类" align="center" prop="level" :key="new Date().getTime()+6" />
      <el-table-column label="奖励配置" align="center" prop="bookLevelName" :key="new Date().getTime()+7"/>
      <el-table-column label="修改时间" align="center" prop="updateTime" width="180" :key="new Date().getTime()+8">

以上两种方式都可以优化掉切换时造成的抖动问题