使用el-row及el-col頁(yè)面縮放時(shí)出現(xiàn)空行的問(wèn)題及解決

更新時(shí)間：2024年03月19日 08:52:41 作者：じòぴé南冸じょうげん

這篇文章主要介紹了使用el-row及el-col頁(yè)面縮放時(shí)出現(xiàn)空行的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

問(wèn)題

當(dāng)縮放到90%或者110%，選中下拉后，下方就會(huì)出現(xiàn)空行

如下圖所示：

關(guān)于el-row 和 el-col

參數(shù)	說(shuō)明	類型	可選值	默認(rèn)值
span	柵格占據(jù)的列數(shù)	number	—	24
offset	柵格左側(cè)的間隔格數(shù)	number	—	0
push	柵格向右移動(dòng)格數(shù)	number	—	0
pull	柵格向左移動(dòng)格數(shù)	number	—	0

el-row 和 el-col 應(yīng)該配合使用，并且 el-col 應(yīng)該包含在 el-row 中。

同時(shí)，檢查 el-col 的 span 屬性或者offset屬性是否設(shè)置正確，它決定了列在柵格系統(tǒng)中的寬度占比。

如果為 row 或 col 設(shè)置了固定的寬度或高度，當(dāng)頁(yè)面縮放時(shí)，這些固定尺寸的元素可能無(wú)法適應(yīng)新的容器大小，從而導(dǎo)致布局問(wèn)題或空行出現(xiàn)。

代碼

如下：

<div v-show="radioActive == '2'">
<el-row >
  <el-col  :span="10" :offset="1" v-for="(item,index) in temList" :key="index">
              <el-form-item :label="`${item.printTitle}`" label-width="110px">
                <el-select
                  v-model="item.printId"
                  clearable
                  placeholder="請(qǐng)選擇"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(v,i) in temList[item.moduleType]"
                    :key="i"
                    :label="v.moduleName"
                    :value="v.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
</el-row >
</div>

解決方案

使用彈性盒子，自動(dòng)換行即可

display: flex;
flex-wrap: wrap;

完整代碼如下：

<el-row >
<div v-show="radioActive == '2'" style=" display: flex;flex-wrap: wrap;">
  <el-col  :span="10" :offset="1" v-for="(item,index) in temList" :key="index">
              <el-form-item :label="`${item.printTitle}`" label-width="110px">
                <el-select
                  v-model="item.printId"
                  clearable
                  placeholder="請(qǐng)選擇"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(v,i) in temList[item.moduleType]"
                    :key="i"
                    :label="v.moduleName"
                    :value="v.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
</div>
</el-row >

其他情況

1.百分比寬度/高度：如果使用的是百分比寬度或高度，并且這些百分比是基于某個(gè)父元素的，那么當(dāng)父元素的大小改變時(shí)（例如頁(yè)面縮放），子元素的大小也會(huì)相應(yīng)改變。但如果計(jì)算不當(dāng)或存在其他布局問(wèn)題，也可能導(dǎo)致空行的出現(xiàn)。

2.浮動(dòng)與清除：使用浮動(dòng)布局時(shí)，如果沒(méi)有正確清除浮動(dòng)，可能會(huì)導(dǎo)致布局問(wèn)題?？招锌赡苁怯捎诟?dòng)元素未能正確占據(jù)其應(yīng)有的空間或位置。

3.外邊距/內(nèi)邊距重疊：CSS中的外邊距（margin）和內(nèi)邊距（padding）可能會(huì)在某些情況下重疊，導(dǎo)致看似有空行但實(shí)際上是由內(nèi)外邊距重疊導(dǎo)致的布局異常。