element-ui修改el-form-item样式的详细示例
更新时间：2022年11月14日 11:20:25 作者：程序猿想成程序狮
在使用element-ui组件库的时候经常需要修改原有样式,下面这篇文章主要给大家介绍了关于element-ui修改el-form-item样式的详细示例,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
form结构
<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>
总结
到此这篇关于element-ui修改el-form-item样式的文章就介绍到这了,更多相关element-ui修改el-form-item样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue页面引入three.js实现3d动画场景操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
本文主要给大家分享了vue项目的创建步骤以及vue路由router的相关知识点，非常的实用，有需要的小伙伴可以来参考下2020-01-01
这篇文章主要为大家详细绍介绍了Vue插件之滑动验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
本文详细介绍了在Vue框架中使用el-tree组件创建横向滚动条的方法,通过代码示例和步骤说明,帮助开发者理解和实现横向滚动功能,感兴趣的可以了解一下2024-09-09
这篇文章主要介绍了Vue.js中组件中的slot实例详解的相关资料,需要的朋友可以参考下2017-07-07
这篇文章主要介绍了vue中使用jwt-decode解析token,文末给大家补充介绍了vue通过jwt-decode解析token获取需要的数据，本文给大家介绍的非常详细，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了Nuxt使用Vuex的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
动态路由可以根据不同用户登录获取不一样的路由层级,可随时调配路由,下面这篇文章主要给大家介绍了关于vue实现动态路由的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
下面小编就为大家带来一篇Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了antd日期选择器禁止选择当天之前的时间操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论