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

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

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

問題

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

如下圖所示：

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

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

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

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

如果為 row 或 col 設(shè)置了固定的寬度或高度，當頁面縮放時，這些固定尺寸的元素可能無法適應(yīng)新的容器大小，從而導(dǎo)致布局問題或空行出現(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="請選擇"
                  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>

解決方案

使用彈性盒子，自動換行即可

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="請選擇"
                  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 >