element-ui修改el-form-item樣式的詳細(xì)示例
更新時間：2022年11月14日 11:20:25 作者：程序猿想成程序獅
在使用element-ui組件庫的時候經(jīng)常需要修改原有樣式,下面這篇文章主要給大家介紹了關(guān)于element-ui修改el-form-item樣式的詳細(xì)示例,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
form結(jié)構(gòu)
<el-form :model="formData" label-width="80px">
<el-form-item label="label1">
<el-input v-model="formData.value1"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
修改el-form-item所有樣式
<style lang="less" scoped>
.el-form {
.el-form-item {
/deep/ * {
font-size: 18px;
color: blue;
}
}
}
</style>
只修改label
<style lang="less" scoped>
.el-form {
.el-form-item {
/deep/ .el-form-item__label {
font-size: 18px;
color: blue;
}
}
}
</style>
只修改content
<style lang="less" scoped>
.el-form {
.el-form-item {
/deep/ .el-form-item__content {
* {
font-size: 18px;
color: blue;
}
}
}
}
</style>
只修改input
<style lang="less" scoped>
.el-form {
.el-form-item {
/deep/ .el-form-item__content {
input {
font-size: 18px;
color: blue;
}
}
}
}
</style>
只修改button
<style lang="less" scoped>
.el-form {
.el-form-item {
/deep/ .el-form-item__content {
button {
font-size: 18px;
color: blue;
}
}
}
}
</style>
總結(jié)
到此這篇關(guān)于element-ui修改el-form-item樣式的文章就介紹到這了,更多相關(guān)element-ui修改el-form-item樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue頁面引入three.js實(shí)現(xiàn)3d動畫場景操作
這篇文章主要介紹了vue頁面引入three.js實(shí)現(xiàn)3d動畫場景操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
本文主要給大家分享了vue項目的創(chuàng)建步驟以及vue路由router的相關(guān)知識點(diǎn)，非常的實(shí)用，有需要的小伙伴可以來參考下2020-01-01
這篇文章主要為大家詳細(xì)紹介紹了Vue插件之滑動驗證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
vue中el-tree?橫向滾動條的實(shí)現(xiàn)
本文詳細(xì)介紹了在Vue框架中使用el-tree組件創(chuàng)建橫向滾動條的方法,通過代碼示例和步驟說明,幫助開發(fā)者理解和實(shí)現(xiàn)橫向滾動功能,感興趣的可以了解一下2024-09-09
這篇文章主要介紹了Vue.js中組件中的slot實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了vue中使用jwt-decode解析token,文末給大家補(bǔ)充介紹了vue通過jwt-decode解析token獲取需要的數(shù)據(jù)，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了Nuxt使用Vuex的方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
手把手教你vue實(shí)現(xiàn)動態(tài)路由
動態(tài)路由可以根據(jù)不同用戶登錄獲取不一樣的路由層級,可隨時調(diào)配路由,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)動態(tài)路由的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue2.0基于vue-cli+webpack父子組件通信(實(shí)例講解)
下面小編就為大家?guī)硪黄猇ue2.0基于vue-cli+webpack父子組件通信(實(shí)例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了antd日期選擇器禁止選擇當(dāng)天之前的時間操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10