脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue el-table背景透明

Vue如何设置el-table背景透明样式

 更新时间：2022年08月12日 16:43:23   作者：有名呀  
本文主要介绍了Vue如何设置el-table背景透明样式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

【前言】

一般我们在使用ElementUI组件库的时候，在使用el-table时，背景通常是白色的，但有时候不能满足我们的实际需求，我想让el-table背景变为透明色，下面就来说一下如何实现。

【内容】

说明：因为我们通常都是使用ElementUI库的组件，这个组件库是有自己的一套样式的，所以要想实现自己想要的效果，难免要重写样式来实现。

重写样式需要加（>>> 或者 /deep/），不加的话是不会生效的。

1、在el-table外加div并自定义class

<div class="table" style="margin-top:20px;">
    <el-table :data="tableData"  :header-cell-style="getRowClass"  >
        <el-table-column  label="a" type="index"></el-table-column>
        <el-table-column label="b" prop="data"></el-table-column>
    </el-table>
</div>

2、重写css样式

.table /deep/ .el-table th {
    background-color: transparent!important;
}
 
.table /deep/ .el-table tr {
    background-color: transparent!important;
}
.table /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
   background-color: transparent;
}
.el-table::before {//去除底部白线
     left: 0;
     bottom: 0;
     width: 100%;
     height: 0px;
}

到此这篇关于Vue如何设置el-table背景透明样式的文章就介绍到这了,更多相关Vue el-table背景透明内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 在 Vue 中编写 SVG 图标组件的方法

    在 Vue 中编写 SVG 图标组件的方法

    这篇文章主要介绍了在 Vue 中编写 SVG 图标组件的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • 分享Vue组件传值的几种常用方式(二)

    分享Vue组件传值的几种常用方式(二)

    这篇文章主要介绍了分享Vue组件传值的几种常用方式，文章围绕主题斩开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-09-09
  • Vue3组件不发生变化如何监听pinia中数据变化

    Vue3组件不发生变化如何监听pinia中数据变化

    这篇文章主要给大家介绍了关于Vue3组件不发生变化如何监听pinia中数据变化的相关资料,pinia是Vue的存储库,它允许您跨组件/页面共享状态,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • vue3+axios封装拦截器方式

    vue3+axios封装拦截器方式

    介绍了如何在Vue项目中使用Axios封装请求、配置拦截器,并在api.js中统一管理API接口,同时,也讲解了如何在vite.config.js中配置解决跨域问题,这些操作可以优化前端代码结构,提高开发效率
    2024-09-09
  • 浅析Vue中权限管理的实现

    浅析Vue中权限管理的实现

    在前端开发中,权限管理是一项至关重要的任务,本教程将深入探讨如何在 Vue.js 项目中实施权限管理,并详细讲解如何实现到按钮级别的细粒度控制,希望对大家有所帮助
    2024-11-11
  • Vue无限滑动周选择日期的组件的示例代码

    Vue无限滑动周选择日期的组件的示例代码

    这篇文章主要介绍了Vue无限滑动周选择日期的组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue中实现子组件接收父组件方法并获取返回值

    vue中实现子组件接收父组件方法并获取返回值

    这篇文章主要介绍了vue中实现子组件接收父组件方法并获取返回值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • Vue 使用 setup 语法糖的示例详解

    Vue 使用 setup 语法糖的示例详解

    在 setup 语法糖中通过 import 引入的内容，也可以直接在 template 标签中使用，这篇文章主要介绍了Vue 使用 setup 语法糖,需要的朋友可以参考下
    2023-10-10
  • 在Vue当中同时配置多个路由文件的方法案例代码

    在Vue当中同时配置多个路由文件的方法案例代码

    这篇文章主要介绍了在Vue当中同时配置多个路由文件的方法,包含具体代码，本文分步骤结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-12-12
  • vue tailwindcss安装配置教程示例详解

    vue tailwindcss安装配置教程示例详解

    这篇文章主要为大家介绍了vue tailwindcss安装配置教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09

最新评论