element-ui修改el-form-item样式的详细示例

目录
  • form结构
  • 修改el-form-item所有样式
  • 只修改label
  • 只修改content
  • 只修改input
  • 只修改button
  • 总结

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样式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue el-form一行里面放置多个el-form-item的实现

    vue el-form一行里面放置多个el-form-item的实现

    最近用到 element-ui 的 el-form,要求一行里面放置多个 el-form-item. 其实很简单,用 layout 布局就可以简单实现. layout 布局是通过基础的24分栏,从而迅速简洁地创建布局. 代码实现如下: <el-form size="mini" label-width="160px" label-position="right" :model="formData" :ref="F

  • el-form-item prop属性动态绑定不生效问题及解决

    el-form-item prop属性动态绑定不生效问题及解决

    目录 prop属性动态绑定不生效 el-form-item中prop属性绑定报错 控制台报错 源代码 修改后 prop属性动态绑定不生效 做项目时表单有一项需要有条件展示是否校验,于是首先就想到prop动态绑定,如下 但是试了好几遍都不生效,最后改成rules动态绑定校验就OK了 el-form-item中prop属性绑定报错 报错:“Error: please transfer a valid prop path to form item!“ 控制台报错 原因:因为这里动态创建的el-form

  • element中el-form-item属性prop踩坑

    element中el-form-item属性prop踩坑

    最近负责前后端项目开发,有个需求是实现Djangorestframework(drf)+element实现动态渲染form表单,drf后端提供json,前端从json中获取form表单元素,并且绑定表单验证规则 在el-form-item属性prop上遇到报错或者没绑定到数据,报错如下 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'prop')" elemen

  • element-ui修改el-form-item样式的详细示例

    element-ui修改el-form-item样式的详细示例

    目录 form结构 修改el-form-item所有样式 只修改label 只修改content 只修改input 只修改button 总结 form结构 <el-form :model="formData" label-width="80px"> <el-form-item label="label1"> <el-input v-model="formData.value1"></e

  • Python快速优雅的批量修改Word文档样式

    Python快速优雅的批量修改Word文档样式

    需求描述 手上现有若干份财务分析报告的Word文档,如下: 每一份Word文档中的内容如下: 为了方便后续审阅,需要将所有文档中所有含有资金的语句标红加粗,如图所示 步骤分析和前置知识 为了解决这个需求简单复习一下相关知识.Word文档一般而言由文档(document) - 段落(paragraph) - 文字块(run) 三级结构组成: 从需求反馈中可以看出,本质上我们需要做的就是对所有含有资金的文字块Run进行样式调整 因此,本需求的逻辑如下: 1.创建一个空文件夹(用于存放修改后的财务报告

  • 在Vue中使用deep深度选择器修改element UI组件的样式

    在项目当中我们常常会使用到 Element UI 组件库来进行快速开发,但是组件在引入之后它都会有官方默认的样式,有些情况我们需要修改它的样式. 方法一(不推荐):使用class 为要修改的这个组件标签设置一个 class 类名,然后在 <style></style> 标签中设置样式.但要注意这种方式必须是在全局下才会生效,也就是说 <style></style> 标签中不能用 scoped 属性. <style> </style>

  • 动态实现element ui的el-table某列数据不同样式的示例

    动态实现element ui的el-table某列数据不同样式的示例

    问题描述 在饿了么ui的框架中,输入数据el-form,输出数据el-table.有时候产品想让枯燥的表格来点动态的样式,比如不同的内容展示不同的样式,对于这个需求,其实方式有很多种,本文列举两种,以供参考. 实现方式一 效果图如下 代码如下 <template> <div id="app"> <!-- 需求:三国人物表格,要求不同的国别展示不同的颜色(魏国红色.蜀国黑色.吴国蓝色) --> <el-table :data="tabl

  • Element Plus修改表格行和单元格样式详解

    Element Plus修改表格行和单元格样式详解

    目录 前言 设置某一行的样式 设置某一个单元格的样式 表头样式修改(赠品) 总结 前言 实习工作需要根据表格的状态字段来设置行的样式,记录一波. 先来一下基础配置.(Vue3) <template> <el-table :data="tableData" border style="width: 400px"> <el-table-column prop="name" label="姓名" wid

  • element ui的el-input-number修改数值失效的问题及解决

    element ui的el-input-number修改数值失效的问题及解决

    目录 element ui的el-input-number修改数值失效 问题代码 解决办法 分析说明 官方资料 最新说明 el-input-number组件无法修改默认值为空 element ui的el-input-number修改数值失效 问题代码 目的:实现去掉小数位. <el-input-number v-model="cycle" @change="vaidateCycle" :min="1" :max="3600&quo

  • 总结Vue Element UI使用中遇到的问题

    总结Vue Element UI使用中遇到的问题

    基于 vue2.0 的 element-ui 框架,使用起来还是很方便的,非常适合快速开发,但是在做自己的项目中还是会碰到这样那样的问题,有些问题官方文档并不是很详尽,以下是我在使用 element-ui 过程中一些常用的或碰到的一些问题笔记. 一.DateTimePicker 日期选择范围为当前时间以及当前时间之前 <template> <div> <el-date-picker size="small" clearable :picker-option

  • Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）

    这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级关系,就一定会用到树形组件了. 使用Vue + Element UI,构建出最基本的树如下图所示: 现在我们就要在这个基础上进行改造,使页面更加符合我们的交互场景. 下拉菜单 将下拉菜单嵌到树节点中,使操作更加简便.紧凑. 效果演示 效果如图: 图示1:悬浮在树节点状态 图示2:点击三个点图标状态

  • Vue Element UI自定义描述列表组件

    Vue Element UI自定义描述列表组件

    本文实例为大家分享了Vue Element UI自定义描述列表组件的具体代码,供大家参考,具体内容如下 效果图 写在前面 写后台管理经常从列表点击查看详情,展示数据信息,Element UI虽然有表格组件,但是描述组件并没有,之前团队的成员遇到这种情况都自己去写样式,写起来也麻烦,而且每个人写出来的样式也不统一,破坏了项目的整体风格. 像是Ant Design UI就有描述组件,用起来特别舒服,所以索性自己结合Element UI的el-row和el-col自己写了一个. 实现哪些功能 1.每行

  • Vue+Element UI实现下拉菜单的封装

    Vue+Element UI实现下拉菜单的封装

    本文实例为大家分享了Vue+Element UI实现下拉菜单封装的具体代码,供大家参考,具体内容如下 1.效果图 先贴个效果图,菜单项没有做样式美化,图中显示的边框也是没有的(边框是外部容器的边框),其它的根据需要自己修改一下样式即可. 2.组件封装 组件的封装用到了CSS动画.定位.,以及Element UI提供的下拉菜单组件el-dropdown.代码如下, <template> <div class="all" @click="clickFire&qu

随机推荐