elementui中el-row的el-col排列混亂問題及解決
更新時間：2024年08月07日 09:08:19 作者：前端菜鳥。
這篇文章主要介紹了elementui中el-row的el-col排列混亂問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
el-row中el-col排列混亂
解決方案
將el-row中元素改為flex布局
設(shè)置flex-wrap: wrap，避免el-row中元素span之和超過24時擠在一行
.el-row{
display:flex;
flex-wrap: wrap;
}el-col和el-row結(jié)合el-form,位置錯亂問題
el-row和el-col配合el-form 出現(xiàn)排版錯亂
問題表現(xiàn)
el-col的內(nèi)容為空，正常；el-col的內(nèi)容不一樣，回顯時，有時正常，有時錯亂
問題原因
el-row和el-col的中的span元素之和超過了24的時候，就會出現(xiàn)排版錯亂（可見elemet官網(wǎng)，柵格布局方式）
錯誤代碼結(jié)構(gòu)
修改結(jié)構(gòu)
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在 Vue 中,深度監(jiān)聽是指監(jiān)聽一個對象或數(shù)組的嵌套屬性（深層結(jié)構(gòu)）的變化,而不僅僅是監(jiān)聽頂層屬性的引用變化,本文給大家介紹了如何在Vue中實現(xiàn)深度監(jiān)聽,并通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
vue中實現(xiàn)methods一個方法調(diào)用另外一個方法
下面小編就為大家分享一篇vue中實現(xiàn)methods一個方法調(diào)用另外一個方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Lambda函數(shù),也稱為匿名函數(shù),是Vue3中的一種函數(shù)類型,綁定匿名方法和綁定普通方法主要是寫法上的區(qū)別,其他的區(qū)別并不是很大,本文主要介紹了Vue3中使用匿名函數(shù)的方法實現(xiàn),感興趣的可以了解一下2023-12-12
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)簡單的跑馬燈，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了vue-cli隨機生成port源碼的方法，文中給大家介紹了vue 隨機色生成方法,需要的朋友可以參考下2019-09-09
在Vue項目中集成CryptoJS進(jìn)行數(shù)據(jù)加密,首先需要通過npm安裝CryptoJS安裝包,然后在項目文件中引入CryptoJS,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-11-11
計算屬性是vue里面為了簡化在模板語法中對響應(yīng)式屬性做計算而存在的，這篇文章主要介紹了vue?過濾、模糊查詢（計算屬性?computed）,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue?github用戶搜索案例分享，文章基于Vue的相關(guān)資料展開對主題的詳細(xì)介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-04-04
基于vue3開發(fā)mobile-table適用于移動端表格
這篇文章主要給大家介紹了關(guān)于如何基于vue3開發(fā)mobile-table適用于移動端表格的相關(guān)資料,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Vue.js 中 axios 跨域訪問錯誤問題及解決方法，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-11-11