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使用window.open()跳转页面的代码案例

    vue使用window.open()跳转页面的代码案例

    这篇文章主要介绍了vue中对window.openner的使用,vue使用window.open()跳转页面的代码案例,本文通过实例代码给大家详细讲解,需要的朋友可以参考下
    2022-11-11
  • Vue中引入第三方JS库的四种方式

    Vue中引入第三方JS库的四种方式

    在开发Vue项目的时候,有时需要使用一些非ES6格式的没有export的js库,下面这篇文章主要给大家介绍了关于Vue中引入第三方JS库的详细步骤,需要的朋友可以参考下
    2022-04-04
  • vue3 reactive数据更新视图不更新问题解决

    vue3 reactive数据更新视图不更新问题解决

    这篇文章主要为大家介绍了vue3 reactive数据更新视图不更新问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • vue中路由传参6种方式总结

    vue中路由传参6种方式总结

    这篇文章主要为大家详细介绍了vue中路由传参6种方式,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解一下
    2023-08-08
  • Vue使用NProgress实现页面顶部的进度条显示效果

    Vue使用NProgress实现页面顶部的进度条显示效果

    这篇文章主要介绍了vue Nprogress页面顶部进度条功能实现,NProgress是页面跳转是出现在浏览器顶部的进度条,本文通过实例代码给大家讲解,需要的朋友可以参考下
    2022-12-12
  • 使用imba.io框架得到比 vue 快50倍的性能基准

    使用imba.io框架得到比 vue 快50倍的性能基准

    imba 是一种新的编程语言,可以编译为高性能的 JavaScript。可以直接用于 Web 编程(服务端与客户端)开发。这篇文章主要介绍了使用imba.io框架,得到比 vue 快50倍的性能基准,需要的朋友可以参考下
    2019-06-06
  • vue+swiper实现左右滑动的测试题功能

    vue+swiper实现左右滑动的测试题功能

    这篇文章主要介绍了vue+swiper实现左右滑动的测试题功能,本文通过实例代码给大介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-10-10
  • vue菜单栏联动内容页面tab的实现示例

    vue菜单栏联动内容页面tab的实现示例

    本文主要介绍了vue菜单栏联动内容页面tab的实现示例,左侧菜单栏与右侧内容部分联动,当点击左侧的菜单,右侧会展示对应的tab,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • Vue.JS入门教程之列表渲染

    Vue.JS入门教程之列表渲染

    这篇文章主要为大家详细介绍了Vue.JS入门教程之列表渲染,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 详解vue3中websocket的封装与使用

    详解vue3中websocket的封装与使用

    这篇文章主要为大家详细介绍了vue3中websocket的封装与使用的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12

最新评论