vue+element-ui中的el-table-column配合v-if導致列樣式與位置錯亂的現象


轉載自:https://blog.csdn.net/tian_xuewu/article/details/97289316

描述:

根據需求,對el-table的某一列進行判斷顯隱時,經常會出現列的位置錯亂和表頭的樣式變化的問題;
注:此問題不屬於技術問題,可以再多看看框架文檔;
ex:(會錯亂的寫法)
<el-table-column v-if="type === '0' ">姓名</el-table-column>
<el-table-column v-if="type === '1' ">年齡</el-table-column>

修改:

<el-table-column v-if="type === '0' " key='1' >姓名</el-table-column>
<el-table-column v-if="type === '1' " key='2' >年齡</el-table-column>

<el-table-column v-if="type === '0' " : key="Math.random()">姓名</el-table-column>
<el-table-column v-if="type === '1' " : key="Math.random()">年齡</el-table-column>

說明:

給使用了v-if的列,加一個固定的key值,或循環渲染key即可;
雖然仍會有一瞬間的表頭的樣式的改變和列的錯亂,但是已經不影響數據的展示了;


免責聲明!

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



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