Element?Plus在el-form-item中設(shè)置justify-content無效的解決方案
Element Plus在el-form-item中設(shè)置justify-content無效
在el-form-item中寫了一個(gè)包含兩個(gè)按鈕的按鈕組，需要居右對齊，使用justify-content：flex-end不起效，經(jīng)檢查問題在于el-form-item下面自動(dòng)生成的.el-form-item__content樣式中包含一句：
.el-form-item__content {
flex：1
}所以導(dǎo)致justify-content不生效
解決辦法是修改該類的flex屬性，但在代碼里直接對該類使用類選擇器不行，因?yàn)檫@是element內(nèi)部定義的類，不是我們定義的，所以需要用到深度選擇器來檢索該類：
/deep/ .el-form-item__content{
flex: unset
}或者使用v-deep命令：
::v-deep .el-form-item__content{
flex: unset
}兩種方式均可修改.el-form-item__content樣式，當(dāng)然直接使用這種方式修改會(huì)對所有的.el-form-item__content造成影響，需要scoped或者子類選擇來進(jìn)行約束
結(jié)果：
按鈕組成功居右對齊！
另外一種居右對齊的辦法是使用float，但這并不會(huì)解決我們justify-conten失效的問題
justify-content設(shè)置在element-plus某些控件中無效
在 el-form-item 設(shè)置外部樣式j(luò)ustify-content: flex-end 卡住了，死活不起效，記得在element中是可以起效的啊。
查看了element-plus/dist/index.css 的樣式表，發(fā)現(xiàn).el-form-item__content 的樣式中有這樣一句：
.el-form-item__content{
flex:1
}如果有這樣一句當(dāng)然 justify-content: flex-end 不會(huì)起作用了，于是就覆寫了element-plus 默認(rèn)樣式
/deep/ .el-form-item__content{
flex: unset;
}當(dāng)然是用到了scoped，全局覆寫就慘了。修改后問題解決。
當(dāng)然您也可以用float解決，那么您可能失去一次學(xué)習(xí)justify-content的機(jī)會(huì)，理解和解決問題才是我們學(xué)習(xí)的關(guān)鍵。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue組件之間通信實(shí)例總結(jié)(點(diǎn)贊功能)
這篇文章主要介紹了vue組件之間通信,結(jié)合實(shí)例形式分析了vue父子組件、兄弟組件之間通信的原理、實(shí)現(xiàn)方法,并給出了一個(gè)類似點(diǎn)贊功能的總結(jié)實(shí)例,需要的朋友可以參考下2018-12-12
Vue?實(shí)現(xiàn)新國標(biāo)紅綠燈效果實(shí)例詳解
這篇文章主要為大家介紹了Vue?實(shí)現(xiàn)新國標(biāo)紅綠燈效果實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Element實(shí)現(xiàn)動(dòng)態(tài)增加多個(gè)輸入框并校驗(yàn)
本文主要介紹了Element實(shí)現(xiàn)動(dòng)態(tài)增加多個(gè)輸入框并校驗(yàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue為什么要謹(jǐn)慎使用$attrs與$listeners
這篇文章主要介紹了Vue為什么要謹(jǐn)慎使用$attrs與$listeners，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
Vue中的路由導(dǎo)航守衛(wèi)導(dǎo)航解析流程
這篇文章主要介紹了Vue中的路由導(dǎo)航守衛(wèi)導(dǎo)航解析流程,正如其名，vue-router 提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。這里有很多方式植入路由導(dǎo)航中：全局的，單個(gè)路由獨(dú)享的，或者組件級的2023-04-04
element-plus的el-table自定義表頭篩選查詢功能實(shí)現(xiàn)
這篇文章主要介紹了element-plus的el-table自定義表頭篩選查詢功能實(shí)現(xiàn),本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07
ElementUI Tag組件實(shí)現(xiàn)多標(biāo)簽生成的方法示例
這篇文章主要介紹了ElementUI Tag組件實(shí)現(xiàn)多標(biāo)簽生成的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
今天小編就為大家分享一篇vue表單自定義校驗(yàn)規(guī)則介紹，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Vue.extend使用示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
我們在開發(fā)過程中經(jīng)常需要監(jiān)聽用戶的輸入,比如用戶的點(diǎn)擊事件、拖拽事件、鍵盤事件等等,這篇文章主要給大家介紹了關(guān)于Vue監(jiān)聽鍵盤事件實(shí)用示例的相關(guān)資料,需要的朋友可以參考下2023-11-11