element-ui用v-if让表格变换出现错乱

根据上面的开票类型变换下面的表格，在select标签上用@change，变换之后上面的名称改变了但是内容错乱
正确的图应该是这样的

原代码

<el-select
   v-model="edit.source"
   clearable
   placeholder="单据类型"
   @change="dangers"
                >
     <el-option label="单据1" :value="0"></el-option>
     <el-option label="单据2" :value="1"></el-option></el-select>
<el-table v-if="clickType==1" highlight-current-row
   :data="edit.detailedList"
   border
   style="width: 100%">
 </el-table>
<el-table v-else highlight-current-row
   :data="edit.detailedList"
   border
   style="width: 100%">
 </el-table>

methods里

    dangers() {
      this.clickType = this.edit.source;
      this.edit.detailedList = [];
    },

解决方法
把v-if改成v-show