解决elementui动态切换table列内容，出现数据闪动情况

功能描述：

动态显示表格的某些列的内容
二级表头也是动态显示

解决问题:

先看下我录制的gif图，会有数据闪动的情况

解决方法：

首先，不要使用v-show，要使用v-if。
其次，表格加载属于懒加载，所以每次切换内容需要让表格重新加载一次
实现方法：给表格加索引，每次切换改变索引值

直接上代码：

// 控制表格切换
<el-radio-group size="mini" v-model="listQuery.cntype" class="marginR10" @change="tabRadioType">
	<el-radio-button label="1">指标核查数据</el-radio-button>
    <el-radio-button label='2'>加标回收数据</el-radio-button>
</el-radio-group>

// 表格内容
<template>
    <el-table :data="tableList" :key="toggleIndex" height="100%" border style="width: 100%" size="mini">
          <el-table-column align="center" label="序号" min-width="50" type="index"></el-table-column>
          <el-table-column align="center" label="时间" min-width="100" prop="dataTime" v-if="isShowDataTime"></el-table-column>
          <el-table-column align="center" label="流域" min-width="100" prop="valley"></el-table-column>
          <el-table-column align="center" label="支干/断面" min-width="80" prop="crossSection"></el-table-column>
          <el-table-column v-for="(fh,index) in firstHeaders" :key="index" :label="fh.name">
            <el-table-column v-for="(sh,index) in fh.secondCols" :key="index+'2'" :prop="sh.code" :label="sh.name" min-width="110"></el-table-column>
          </el-table-column>
        </el-table>
</template>
<script>
    // data数据
    data(){
    	return {
    		isShowDataTime: true, // 默认显示 表格中时间，切换时隐藏
    		toggleIndex:0, // 设置索引默认值
    		tableList:[],
		      firstHeaders:[],
		      HC_tableList:[
		        {
		          dataTime: "2019-12-09",
		          valley:'呼兰河',
		          crossSection:'庆虹桥', 
		          PH_HC: "6.00",
		          PH_BJ: "N",
		          KMnO4_HC:'8.99',
		          KMnO4_BJ:'N',
		          NH_HC:'12.99',
		          NH_BJ:'N',
		        },
		        {
		          dataTime: "2019-09-09",
		          valley:'呼兰河',
		          crossSection:'大桥', 
		          PH_HC: "6.88",
		          PH_BJ: "N",
		          KMnO4_HC:'14.99',
		          KMnO4_BJ:'N',
		          NH_HC:'12.21',
		          NH_BJ:'N',
		        },
		        {
		          dataTime: "2019-09-09",
		          valley:'呼兰河',
		          crossSection:'大桥', 
		          PH_HC: "6.66",
		          PH_BJ: "N",
		          KMnO4_HC:'18.45',
		          KMnO4_BJ:'N',
		          NH_HC:'12.22',
		          NH_BJ:'N',
		        }
		      ],
		      HC_firstHeaders:[
		        { 
		          name:'PH值',
		          code: "PH",
		          secondCols:[
		            { 
		              code: "PH_HC",
		              name: "核查数据",
		            },
		            { 
		              code: "PH_BJ",
		              name: "数据标记",
		            }
		          ]
		        },
		        { 
		          name:'高猛酸钾',
		          colspan:2,
		          rowspan:1,
		          code:'KMnO4',
		          secondCols:[
		            { 
		              code: "KMnO4_HC",
		              colspan: 1,
		              name: "核查数据",
		              rowspan: 1,
		              secondCols: null,
		            },
		            { 
		              code: "KMnO4_BJ",
		              colspan: 1,
		              name: "数据标记",
		              rowspan: 1,
		              secondCols: null,
		            }
		          ]
		        },
		        { 
		          name:'氨氮',
		          code:'NH_N',
		          secondCols:[
		            { 
		              code: "NH_HC",
		              name: "核查数据",
		            },
		            { 
		              code: "NH_BJ",
		              name: "数据标记",
		            }
		          ]
		        },
		      ],
		      HS_tableList:[
		        {
		          dataTime: "2019-12-09",
		          valley:'兰河',
		          crossSection:'虹桥', 
		          PH_BeforeTime: "2019-12-23",
		          PH_BeforeData: "34.34",
		          PH_AfterTime:'2019-12-23',
		          PH_AfterData:'56.23',
		          KMnO4_BeforeTime: "2019-12-23",
		          KMnO4_BeforeData: "34.34",
		          KMnO4_AfterTime:'2019-12-23',
		          KMnO4_AfterData:'56.23',
		          NH_N_BeforeTime: "2019-12-23",
		          NH_N_BeforeData: "34.34",
		          NH_N_AfterTime:'2019-12-23',
		          NH_N_AfterData:'56.23',
		        },
		        {
		          dataTime: "2019-09-09",
		          valley:'呼兰河',
		          crossSection:'大桥', 
		          PH_BeforeTime: "2019-12-23",
		          PH_BeforeData: "34.34",
		          PH_AfterTime:'2019-12-23',
		          PH_AfterData:'56.23',
		          KMnO4_BeforeTime: "2019-12-23",
		          KMnO4_BeforeData: "34.34",
		          KMnO4_AfterTime:'2019-12-23',
		          KMnO4_AfterData:'56.23',
		          NH_N_BeforeTime: "2019-12-23",
		          NH_N_BeforeData: "34.34",
		          NH_N_AfterTime:'2019-12-23',
		          NH_N_AfterData:'56.23',
		        },
		        {
		          dataTime: "2019-09-09",
		          valley:'呼兰河',
		          crossSection:'大桥', 
		          PH_BeforeTime: "2019-12-23",
		          PH_BeforeData: "34.34",
		          PH_AfterTime:'2019-12-23',
		          PH_AfterData:'56.23',
		          KMnO4_BeforeTime: "2019-12-23",
		          KMnO4_BeforeData: "34.34",
		          KMnO4_AfterTime:'2019-12-23',
		          KMnO4_AfterData:'56.23',
		          NH_N_BeforeTime: "2019-12-23",
		          NH_N_BeforeData: "34.34",
		          NH_N_AfterTime:'2019-12-23',
		          NH_N_AfterData:'56.23',
		        }
		      ],
		      HS_firstHeaders:[
		        { 
		          name:'PH值',
		          code: "PH",
		          secondCols:[
		            { 
		              code: "PH_BeforeTime",
		              name: "加标前时间",
		            },
		            { 
		              code: "PH_BeforeData",
		              name: "加标前数据",
		            },
		            { 
		              code: "PH_AfterTime",
		              name: "加标后时间",
		            },
		            { 
		              code: "PH_AfterData",
		              name: "加标后数据",
		            }
		          ]
		        },
		        { 
		          name:'高猛酸钾',
		          colspan:2,
		          rowspan:1,
		          code:'KMnO4',
		          secondCols:[
		            { 
		              code: "KMnO4_BeforeTime",
		              name: "加标前时间",
		            },
		            { 
		              code: "KMnO4_BeforeData",
		              name: "加标前数据",
		            },
		            { 
		              code: "KMnO4_AfterTime",
		              name: "加标后时间",
		            },
		            { 
		              code: "KMnO4_AfterData",
		              name: "加标后数据",
		            }
		          ]
		        },
		        { 
		          name:'氨氮',
		          code:'NH_N',
		          secondCols:[
		            { 
		              code: "NH_N_BeforeTime",
		              name: "加标前时间",
		            },
		            { 
		              code: "NH_N_BeforeData",
		              name: "加标前数据",
		            },
		            { 
		              code: "NH_N_AfterTime",
		              name: "加标后时间",
		            },
		            { 
		              code: "NH_N_AfterData",
		              name: "加标后数据",
		            }
		          ]
		        },
		      ],
    	}
    }
    // 方法
    methods:{
    	// 每次需要切换时需修改布尔值和索引值，要注意，索引值只需不一样即可，没有其他特殊要求
    	tabRadioType(e){
	        if(e == 1){
	            this.tableList = this.HC_tableList;
	            this.firstHeaders = this.HC_firstHeaders;
	            // 每次需要切换时需修改表格的索引值，解决表格动态加载数据闪的问题
	            this.toggleIndex = 0
	            this.isShowDataTime= true
	        }else if(e == 2){
	            this.tableList = this.HS_tableList;
	            this.firstHeaders = this.HS_firstHeaders;
	            this.toggleIndex = 1
	            this.isShowDataTime= true
	        }
	    }
    }
</script>