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