使用::v-deep修改element组件自带样式 不生效【已解决】

这篇具有很好参考价值的文章主要介绍了使用::v-deep修改element组件自带样式 不生效【已解决】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

element 表格 去掉背景颜色

::v-deep不生效,css,javascript,vue.js,elementui

错误代码:

发现这样写 表格并没有去掉背景色
::v-deep不生效,css,javascript,vue.js,elementui

解决办法

最后发现使用 ::v-deep 如果前面有其他类名 一定要有空格 !!!
::v-deep不生效,css,javascript,vue.js,elementui

 <div class="bkPart posPart t_btn2" style="width: 28%;">
          <div class="co-title">缺料预警</div>
  <el-table ref="table"
           :header-cell-style="{backgroundColor: 'transparent',color: '#ffffff',fontSize: '9px',}" 
           :cell-style="{color: '#fff',backgroundColor: 'transparent',fontSize: '9px',}" 
           :row-style="{color: '#fff',backgroundColor: 'transparent',fontSize: '9px',}" 
           :data="maShortWarnData" 
           :default-sort="{ prop: '', order: '' }" 
           max-height="170px">
            <template slot="empty">
              <span style="color: #969799">{{ $t("NeoLight.empty") }}</span>
            </template>
            <el-table-column prop="line" label="名称" width="120" align="center" />
            <el-table-column prop="totalNeedCount" label="数量" width="50" align="center" />
            <el-table-column prop="totalOutCount" label="累计发料" align="center" />
    </el-table>
</div>

正确样式代码

 // 由于是只在本页面修改, 所以必须要用 /deep/ 或者 ::v-deep 才能生效  /deep/ 是深度选择器,可自行百度了解更多
  .t_btn2 ::v-deep.el-table,
  .el-table__expanded-cell {
    background-color: transparent !important;
  }

  .t_btn2 ::v-deep.el-table tr {
    background-color: transparent !important;
  }

  .t_btn2 ::v-deep.el-table--enable-row-transition .el-table__body td,
  .el-table .cell {
    background-color: transparent !important;
  }

  .t_btn2 ::v-deep.el-table__row>td {
    border: none !important;
  }

  .t_btn2 ::v-deep.el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border-bottom: 1px solid #fff !important;
  }

  .t_btn2 ::v-deep.el-table td.el-table__cell {
    border-bottom: 1px solid #fff !important;
  }

  .t_btn2 ::v-deep.el-table__empty-block {
    background-color: transparent !important;
  }

  /* 清除底部横线 */
  .el-table::before {
    height: 0px;
  }

正确显示效果

::v-deep不生效,css,javascript,vue.js,elementui
::v-deep不生效,css,javascript,vue.js,elementui文章来源地址https://www.toymoban.com/news/detail-529600.html

到了这里,关于使用::v-deep修改element组件自带样式 不生效【已解决】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • element ui组件的自定义类名样式不生效

    element ui中,类似描述列表这种组件  会提供自定义类名属性    需要注意,样式不能写在style scoped标签中,会被vue自动加上data-v属性,导致样式失效。 必须写在style标签里      

    2024年02月13日
    浏览(43)
  • 【element ui】 el-popover 样式修改不生效解决方法

    ①基本结构 ②问题 在修改el-popover的样式的时候,和往常修改elmentui样式一样就是不起效果。使用::v-deep或者是/deep/样式穿透都没有效果。 ③原因 看了一篇博主的博客才得知,原因是 el-popover生成的div不在当前组件之内,甚至不在App.vue组件的div内,他和App.vue组件的div平级。所

    2024年02月07日
    浏览(49)
  • 微信小程序 修改三方组件中的自带样式

    众所周知,微信小程序会引用诸如vant,weiui等三方组件,当我们想要对组件自带样式进行修改的时候该怎么做呢? 1.在调试器中找到想要修改样式的组件的class类名,在对应的wxss中添加样式,此时样式未生效; 2.官方文档中提到可以在externalclass中添加一个类名暴露给父组件,

    2024年02月12日
    浏览(50)
  • vue element ui el-popover 样式修改不生效解决方法

    在使用element 的el-popover 组件时,会发现自己对el-popover 写的样式不起作用,甚至连使用 ::v-deep ‘’ /deep/ 行内Style 这四种样式穿透都不起作用, 这是因为 el-popover生成的div不在当前组件之内,甚至不在App.vue组件的div内,他和App.vue组件的div平级。所以需要全局设置style 首先给

    2024年02月11日
    浏览(53)
  • uniapp 给自定义组件或uview等ui组件加class样式或修改样式在微信小程序不生效的情况

    首先不论是自定义组件还是ui组件,本质上的原因都是微信小程序默认的组件隔离策略导致的。 微信小程序组件隔离文档参考 1.在原有class上修改样式 比如我在uview radio 单选组件的原有class(.u-radio ) ,修改样式出现不生效的情况 解决: 加上 ::v-deep 即可 2.增加class 比如我在

    2024年02月02日
    浏览(68)
  • vue3 样式穿透:deep不生效

    初学vue3,今天需要修改el-input组件的属性(去掉border和文字居右) 网上搜了一下,大致都是采用:deep 样式穿透来修改el-input的属性   上面这段代码运行后没有任何效果。 最后查找原因,是因为我的 style标签没有带scoped属性导致 ,样式修改后如下:

    2024年02月12日
    浏览(38)
  • 怎么修改element ui动态组件的样式

    要修改elementUI组件的样式,可以采用以下两种方式 通过选择权重覆盖elementUI组件的样式,如修改复选框为圆角: 但这种方式为全局样式,会影响页面中所有复选框,如果不希望影响其它页面的样式,可以采用第二中方式 但如果仅仅是设置了scoped属性,样式无法生效,原因是

    2024年02月15日
    浏览(49)
  • 【uniapp】在微信小程序中修改uni-ui组件样式不生效的解决方案

    在使用uniapp框架开发微信小程序时,使用到了uni-ui的uni-table组件。由于需要修改表头的背景色,于是乎在微信开发工具中使用调试工具审查元素获取其class名: 尝试直接在页面中修改样式: 结果无效。于是尝试使用深度选择器 依然无效。然后查询微信平台官方开发文档得知

    2024年02月02日
    浏览(72)
  • Element UI组件中el-checkbox组件样式的修改

    Element UI组件仅提供了 按钮 形式的 Checkbox 激活时的文本颜色修改的属性(text-color)以及激活时的填充色和边框色的修改属性(fill),非按钮形式的如何修改这些样式呢? 提示:直接修改CSS属性,相关代码如下: 我在写style样式的时候并没有加scoped属性,有时候加了该属性修改样

    2024年02月12日
    浏览(50)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包