解決element-ui庫(kù)的el-row的gutter=10間距失效問(wèn)題
更新時(shí)間：2024年08月16日 09:07:15 作者：半張一塊，
這篇文章主要介紹了解決element-ui庫(kù)的el-row的gutter=10間距失效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
el-row的gutter失效問(wèn)題
完整代碼在vue中可直接執(zhí)行
若想gutter間距效果體現(xiàn)出來(lái)，需要將css樣式，（如：border，background等），添加在el-col的子標(biāo)簽div中的class下才能生效
類名添加在el-col中樣式是有了，但是間距確不體現(xiàn)
- html代碼
<el-row :gutter='20'> <el-col :span='6'><div class="gutter">132465</div></el-col> <el-col :span='6'><div class="gutter">132465</div></el-col> <el-col :span='6'><div class="gutter">132465</div></el-col> <el-col :span='6'><div class="gutter">132465</div></el-col> <el-col :span='6'><div class="gutter">132465</div></el-col> </el-row>
- css代碼
.element{
.el-row{
padding: 20px;
.el-col{
margin-bottom: 10px;
.gutter{
border: 1px solid #ccc;
padding: 10px 10px;
}
}
}
}完整代碼
<template>
<div class="element">
<el-row :gutter='20'>
<el-col :span='6'><div class="gutter">132465</div></el-col>
<el-col :span='6'><div class="gutter">132465</div></el-col>
<el-col :span='6'><div class="gutter">132465</div></el-col>
<el-col :span='6'><div class="gutter">132465</div></el-col>
<el-col :span='6'><div class="gutter">132465</div></el-col>
</el-row>
</div>
</template><script>
export default {
name: 'Elememt'
};
</script>
<style lang='less' scoped>
.element{
.el-row{
padding: 20px;
.el-col{
margin-bottom: 10px;
.gutter{
border: 1px solid #ccc;
padding: 10px 10px;
}
}
}
}
</style>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了解決修改el-pagination顯示文字的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Vue組件的層級(jí)關(guān)系，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue3 computed初始化獲取設(shè)置值實(shí)現(xiàn)示例
這篇文章主要為大家介紹了Vue3 computed初始化以及獲取值設(shè)置值實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue3使用element-plus再次封裝table組件的基本步驟
這篇文章主要介紹了vue3使用element-plus再次封裝table組件的基本步驟,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
Vue實(shí)現(xiàn)彈出框點(diǎn)擊空白頁(yè)彈框消失效果
這篇文章主要介紹了VUE實(shí)現(xiàn)彈出框點(diǎn)擊空白頁(yè)彈框消失,實(shí)現(xiàn)方法可以在Vue中實(shí)現(xiàn)彈出框然后通過(guò)點(diǎn)擊空白頁(yè)面來(lái)讓彈窗隱藏,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue項(xiàng)目中路徑使用@和~的區(qū)別及說(shuō)明
這篇文章主要介紹了vue項(xiàng)目中路徑使用@和~的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
在 Vue 開(kāi)發(fā)中,組件通信是構(gòu)建復(fù)雜應(yīng)用的基礎(chǔ),本文將對(duì)比 Vue 2 與 Vue 3,帶你梳理最常用的 5 種通信方案,有需要的小伙伴可以根據(jù)需要進(jìn)行選擇2026-02-02
vue輸入框使用模糊搜索功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue輸入框使用模糊搜索功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
vue父組件向子組件傳遞多個(gè)數(shù)據(jù)的實(shí)例
下面小編就為大家分享一篇vue父組件向子組件傳遞多個(gè)數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue3中集成高德地圖并實(shí)現(xiàn)平移縮放功能
隨著前端技術(shù)的不斷發(fā)展,地圖應(yīng)用在我們的項(xiàng)目中越來(lái)越常見(jiàn),本文將介紹如何在Vue3項(xiàng)目中集成高德地圖,并通過(guò)簡(jiǎn)單的配置實(shí)現(xiàn)地圖的平移和縮放功能,需要的朋友可以參考下2024-09-09