element-ui 修改el-form-item样式

2023-10-27

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>

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

element-ui 修改el-form-item样式 的相关文章

随机推荐

  • 2023华为od机试 Python【拔河比赛】

    前言 本题使用Python解答 如果需要Java代码 请参考以下链接 点我 题目 我们需要为拔河比赛挑选人选 挑选规则如下 1首先按身高排序 然后按体重排序 2 选出10个最合适的人选 输入是一个数组 数组存储的是所有人员的身高 体重信息
  • vue项目的简体繁体切换

    vue项目的简体繁体切换 在项目中有这样的一个需求 需要对APP内的字体进行简体和繁体的切换 一开始在项目中下载引入了vue i18n的语言包 但是有个缺点就是i18n语言包不能对接口返回的字体进行转换 还有的就是只能实现部分字体的转换 工
  • AcWing 826. 单链表

    题目 实现一个单链表 链表初始为空 支持三种操作 1 向链表头插入一个数 2 删除第k个插入的数后面的数 3 在第k个插入的数后插入一个数 现在要对该链表进行M次操作 进行完所有操作后 从头到尾输出整个链表 注意 题目中第k个插入的数并不是
  • Spring中@component的使用

    Spring中 component的使用 component是spring中的一个注解 它的作用就是实现bean的注入 在探究 component前先了解一下注解 何为注解 注解本质上就是一个类 开发中我们可以使用注解 取代 xml配置文件
  • [项目管理-14]:大规模组织的项目管理办公室PMO

    作者主页 文火冰糖的硅基工坊 文火冰糖 王文兵 的博客 文火冰糖的硅基工坊 CSDN博客 本文网址 目录 第1章 什么是PMO 1 1 PMO定义 1 2 PMO的由来 1 3 PMP的职责 第2章 PMO的组织架构 1 1 架构 1 2
  • Python 之 元组小结

    字典是Python中唯一内建的映射类型 字典中的值并没有特殊的顺序 键可以是数字 字符串甚至是元组 dic 1 a 2 b 3 c dict 创建字典 gt gt gt dic 1 a 2 b 3 c gt gt gt dic dict d
  • HAL库函数中的HAL_I2C_Mem_Write /HAL_I2C_Mem_Read中的DevAddress解析

    在HAL库函数中的HAL I2C Mem Write HAL I2C Mem Read两个函数的作用就是玩IIC设备中写入 读取多个直接的数据 函数原型 HAL StatusTypeDef HAL I2C Mem Read I2C Hand
  • java---lambda函数

    背景 lambda 表达式是一个可传递的代码块 可以在以后执行一次或多次 就类似于sort arrs comparator 函数在排列结束之前会不停调用comparator代码块 在java中传递一个代码段并不容易 不能直接传递代码段 Ja
  • LeetCode常见经典算法——KMP算法

    常见经典算法 KMP算法 参考 https www bilibili com video BV1jb411V78H from search seid 6567338116212695926 关键字 有效回溯 最大公共前后缀长度 样本串的ne
  • 西门子200PLC软件的安装和使用

    西门子200PLC软件 v4 0 STEP 7 MicroWIN SP6 的安装和使用 文章目录 目录 文章目录 前言 二 安装时可能会出现的问题 1 无法进行安装并出现英文提示 2 解决方法 三 通信问题 PC PG设置无PC PPI C
  • makefile基础及常用规则

    什么是makefile 或许很多Windows的程序员都不知道这个东西 因为那些Windows的IDE都为你做了这个工作 但我觉得要作一个好的和professional的程序员 makefile还是要懂 特别在Unix下的软件编译 你就不能
  • HTML炫酷文字流

    看到了黑客帝国里源代码 也用HTML写了一个 css padding 0 margin 0 html overflow hidden Html部分
  • Nodejs实现给手机发送短信验证码用于登录功能(免费短信)

    我们开发的应用通常需要通过手机短信验证码验证进行登录 方便了那些容易忘记密码的用户 同时也降低了是密码被盗的风险性 文章目录 1 注册容联云通信账号 免费 2 nodejs发送请求即可发送短信验证码 1 注册容联云通信账号 免费 1 点击这
  • HTTP 304状态码的详细讲解

    HTTP 304状态码的详细讲解 304状态码或许不应该认为是一种错误 而是对客户端有缓存情况下服务端的一种响应 整个请求响应过程如下 客户端在请求一个文件的时候 发现自己缓存的文件有 Last Modified 那么在请求中会包含 If
  • Python实现动态画图并生成gif图像(matplotlib)

    通过Matplotlib中的animation可以方便的生成动态的画图并保存到gif文件 示例代码如下 import numpy as np import matplotlib pyplot as plt import matplotlib
  • 2021-11-07

    Your CLT does not support macOS 11 5 It is either outdated or was modified Please update your CLT or delete it if no upd
  • python数组变整数

    对于array格式的数组来说 numpy提供了一个方便的函数 np trunc arr 来执行取整操作 A np array 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 B np trunc A print B 1 2
  • 打印vector容器的模板函数

    今天在测试vector的时候想写一个vector的打印函数 为了测试不同数据类型的vector 肯定是编一个模板函数 然后就报错 直到看了 理解typename的两个含义 才明白哪里出错 下面是最后正确的代码 include
  • elementui el-form中el-form-item自定义label

    问题描述 在开发中有时候对表单的label需要加入图标 如下图所示 实现方法 将自定义代码块中加入属性slot label 即可 下面是代码实现 仅提供自定义label行 方便大家使用
  • element-ui 修改el-form-item样式

    文章目录 form结构 修改el form item所有样式 只修改label 只修改content 只修改input 只修改button form结构