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