怎么修改element ui动态组件的样式

这篇具有很好参考价值的文章主要介绍了怎么修改element ui动态组件的样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

要修改elementUI组件的样式,可以采用以下两种方式

1. 全局样式

通过选择权重覆盖elementUI组件的样式,如修改复选框为圆角:

    <style>
        .edit-item .el-checkbox__inner {
          border-radius: 50%;
        }
    </style>

但这种方式为全局样式,会影响页面中所有复选框,如果不希望影响其它页面的样式,可以采用第二中方式

2. 局部样式

    <style scoped>
        .edit-item .el-checkbox__inner {
          border-radius: 50%;
        }
    </style>

但如果仅仅是设置了scoped属性,样式无法生效,原因是以上样式会被编译成属性选择器,而elementUI组件内部的结构却无法添加该html属性,以上样式被编译成如下代码:

    .edit-item[data-v-6558bc58] .el-checkbox__inner[data-v-6558bc58] {
          border-radius: 50%;
        }

解决方案也很简单,只需在选择器中要添加>>>即可

    <style scoped>
        .edit-item >>> .el-checkbox__inner {
          border-radius: 50%;
        }
    </style>

如果是sass或less编写的样式,还可以使用/deep/

    <style scoped lang="scss">
        .edit-item /deep/ .el-checkbox__inner {
          border-radius: 50%;
        }
    </style>

以上写法样式都会编译成以下样式:

    .edit-item[data-v-6558bc58] .el-checkbox__inner{} 

所以elementUI中的样式就能成功覆盖文章来源地址https://www.toymoban.com/news/detail-616243.html

到了这里,关于怎么修改element ui动态组件的样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element-ui日历组件el-calendar选中特定时间以及样式修改

    项目开发中,有需要用到日历的组件,而且需要把某些日期标注起来,在这边标注的小红点我用了 el-badge 具体效果如下图所示:  页面标签: 变量声明: 样式修改: 参考地址

    2024年02月11日
    浏览(64)
  • vue | element-ui中 如何修改表格Table组件中滚动条的样式

    在Table表格中,当内容超出容器时就会出现滚动条,elemnt-ui自带的滚动条有时无法满足需求,那么我们可以通过css伪类来实现对滚动条的自定义。 滚动条由两部分组成的: 滑块:可以滑动的部分。 轨道:滚动条的轨道,即滑块的轨道。一般来说滑块的颜色比轨道的颜色深一

    2024年02月11日
    浏览(53)
  • 前端导出表格 修改样式(xlsx-style)用法

            xlsx-style 修改样式的机制  就是选中哪一行,那一列或者哪一个  然后去修改  比如表格最左上角的一个格子 坐标是 (0, 0) 下标  也可以叫做  A1 选中之后   可以修改其样式  1. 下载依赖   首先下载依赖到项目 2. 引入到项目 3. 创建导出表格         为什么

    2024年02月13日
    浏览(48)
  • Avue组件或Element-UI动态修改rules验证规则或根据条件修改rules验证规则

    根据条件修改验证规则:el-form中若A为空,则B可为空,若A有值,则B必填,动态改变B的验证规则 在watch监听事件中,使用auve-form自带的:defaults.sync=\\\"defaults\\\"属性,来操作B的rules验证规则,此写法的效果好于el-form原生,因为设置为必填后会有必填标志* 使用watch监听A值的变化,若

    2024年02月12日
    浏览(48)
  • 小白都会的前端技能---修改element-ui里面的tree组件的icon图标

    在树形组件中,我们渲染到页面上通常来表示一个组织架构的流程,但一般在做的时候会设置打开和关闭为两个不同的字体图标并且在点击的时候可以切换 如下效果图:   打开之前是小加号图标,打开之后是小减号图标 具体方法: 使用element-ui组件设置样式: icon-class =\\\"图标类名\\\"可

    2023年04月18日
    浏览(42)
  • element ui 下拉菜单组件 结合springboot 实现省市区简易三级联动 动态查询 并修改地点的省市区

    目录 前言: 一.数据库表结构:  二.下拉菜单组件 2.1 效果展示 2.2下拉菜单的组件代码: 本篇博客,通过官网的学习,实现下拉菜单动态数据的传递与点击事件,如果只是按部就班的按照官网来,官网下拉菜单模板所提供的事件只能传死数据,很多博主都是照虎画猫,传递

    2024年02月12日
    浏览(71)
  • element Ui对话框样式修改(样式篇)

    先给对话框添头部和尾部添加边框线 在给对话框添加圆角

    2024年02月14日
    浏览(43)
  • VUE3 修改element ui 的样式

    之前修改antd组件库的样式,可以用global修改 但是在修改element ui的样式,用global竟然不生效诶。 如何修改element ui 的样式? 答:用样式穿透 CSS 样式穿透的三种方式 1. 2./deep/ 3.::v-deep 我参与的项目中用的是scss 示例:修改element ui table表的样式 使 element ui的表格变成这样子 注意

    2024年02月09日
    浏览(46)
  • element-ui 修改时间选择器样式

    因为elementUI的时间选择器el-date-picker是将元素直接挂载到页面的 body 中,而非自身元素下,所以使用 /deep/ 穿透也是无法定位到元素的。 解决方案: 利用时间选择器的 popper-class 属性,给其设置样式。 然后再在src/assets下创建style.scss,在该文件里面进行样式的编写 最后再引入

    2024年02月11日
    浏览(51)
  • element ui之修改样式Tabs 标签页

    ●选项卡整个边(四边)    

    2024年02月01日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包