當使用 v-if 和 v-else 條件渲染兩個表格時，v-if 控制的表格內容顯示正常，v-else 控制的表格顯示時部分單元格中的內容不顯示，如下圖所示：
檢查了DOM，確實沒有內容，一頓操作之后發現了有趣的現象，將顯示異常內容的單元格的 slot-scope="scope" 取消之后，表格能正常顯示
1 <!-- <template slot-scope="scope"> --> 2 <template> 3 <el-button size="small" type="success" @click="preview(scope.row,0,0)">查看</el-button> 4 <el-button size="small" type="warning" @click="formDialog(0,scope.row)">編輯</el-button> 5 <el-button size="small" type="danger">刪除</el-button> 6 </template>
但是，這樣操作不是正確的解決方法，因為這樣會導致單元格中的操作不能方便地取到當前行的數據（我目前知道的是這樣），所以去查了查，雖然沒有發現一樣的問題，但也找到了一些有啟發性的信息，比如：
接着我試了試，使用 v-show 來控制第二個表格
1 <div v-if="manageWebsite" > 2 3 </div>
1 <div v-show="!manageWebsite" > 2 3 </div>
結果能行，一切顯示正常了。但是為什么使用 v-if 和 v-else 會出現問題呢？我又去看了看官方文檔，發現了這樣的描述：
“Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。”
“這樣也不總是符合實際需求，所以 Vue 為你提供了一種方式來表達“這兩個元素是完全獨立的，不要復用它們”。只需添加一個具有唯一值的 key 屬性即可。”
然后，我好像明白了（其實不是很明白），知道了解決方法，就是給兩個不同的表格異常的列或表格本身或其父元素添加不同的 key 屬性值。
另外，我還注意到：
“一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。”
如此看來，感覺我這里應該還是用 v-show 更合適一些，但是我這頁面簡單，兩者會有很大的差別嗎？以后再細細研究吧！