vue+element-ui中的el-table-column使用v-if導致位置錯亂的現象


在使用tab切換時,由於使用的表格列,有時候會有不同,使用v-if做判斷,在切換時,往往沒有很准確的顯示和隱藏掉相關列;

會錯亂的寫法:

1 <el-table-column v-if="activeName === 'three' ">金額數</el-table-column>
2 <el-table-column v-if="activeName === 'first' ">訂單數</el-table-column>

正確的寫法:

1 <el-table-column v-if="activeName === 'three' " key="1">金額數</el-table-column>
2 <el-table-column v-if="activeName === 'first' " key="2">訂單數</el-table-column>

給使用了v-if的列,加一個固定的key值,這樣子不會存在此問題了

 或者這樣子也是可以的

1 <el-table-column v-if="activeName === 'three' " :key="Math.random()">金額數</el-table-column>
2 <el-table-column v-if="activeName === 'first' " :key="Math.random()">訂單數</el-table-column>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM