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

目录
  • 【前言】
  • 【内容】
    • 1、在el-table外加div并自定义class
    • 2、重写css样式

【前言】

一般我们在使用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背景透明内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue 如何设置背景颜色及透明度

    vue 如何设置背景颜色及透明度

    背景颜色及透明度设置 如上图,如果是第一张图片,需要在左上角加上灰色背景,白色"封面"字样,背景色需要有透明度. 首先,需要知道rgba() 函数. rgba() 函数使用红(R).绿(G).蓝(B).透明度(A)的叠加来生成各式各样的颜色. RGBA 即红色.绿色.蓝色.透明度(英语:Red, Green, Blue.Alpha). 红色(R)0 到 255 间的整数,代表颜色中的红色成分.. 绿色(G)0 到 255 间的整数,代表颜色中的绿色成分. 蓝色(B)0 到 255 间的

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

    目录 [前言] [内容] 1.在el-table外加div并自定义class 2.重写css样式 [前言] 一般我们在使用ElementUI组件库的时候,在使用el-table时,背景通常是白色的,但有时候不能满足我们的实际需求,我想让el-table背景变为透明色,下面就来说一下如何实现. [内容] 说明:因为我们通常都是使用ElementUI库的组件,这个组件库是有自己的一套样式的,所以要想实现自己想要的效果,难免要重写样式来实现. 重写样式需要加(>>> 或者 /deep/),不加

  • Python matplotlib生成图片背景透明的示例代码

    使用matplotlib生成图片,想要背景透明,而且图例部分也显示透明效果,找到了大概的设置方法,特此记录. # coding=utf-8 # matplotlib背景透明示例图 # python 3.5 import numpy as np import matplotlib.pyplot as plt from pylab import mpl import scipy.stats as stats # 设置中文字体 mpl.rcParams['font.sans-serif'] = ['S

  • iframe背景透明的设置方法

    IE5.5开始支持浮动框架的内容透明.如果想要为浮动框架定义透明内容,则必须满足下列条件. 1.与 iframe 元素一起使用的 allowTransparency 标签属性必须设置为 true. 2.在 iframe 内容源文档,background-color 或 body 元素的 bgColor 标签属性必须设置为 transparent 复制代码 代码如下: <iframe src="./ads_top_tian.html" allowtransparency="

  • 浅谈vue的iview列表table render函数设置DOM属性值的方法

    如下所示: { title: '负责人社保照片', key: 'leaderIdNumber', render: (h, params) => { return h('img',{domProps:{ src:params.row.leaderIdNumber }}) } }, 找了好多,终于找到了原因,如果想要让列表返回的是一个img标签,并且设置img的src,这里不能用props,而是要用domProps就ok了. 以上这篇浅谈vue的iview列表table render函数设置DOM属

  • Android编程实现设置按钮背景透明与半透明及图片背景透明的方法

    本文实例讲述了Android编程实现设置按钮背景透明与半透明及图片背景透明的方法.分享给大家供大家参考,具体如下: Button或者ImageButton的背景设为透明或者半透明: 半透明 复制代码 代码如下: <Button android:background="#e0000000" ... /> 透明 复制代码 代码如下: <Button android:background="#00000000" ... /> 颜色和不透明度 (al

  • Vue绑定class和绑定内联样式的实现方法

    Vue绑定class和绑定内联样式的实现方法

    目录 绑定class 绑定内联样式 绑定class 方式一: 对象语法:给 v-bind:class传 一个对象,以动态地切换 class 当对象中某key对应的值为true时,该key做为className被添加到标签上 .box { width: 100px; height: 100px; background-color: gray; } .circle { border-radius: 50%; } <div id="app"> <div class=&quo

  • 使用vue的v-for生成table并给table加上序号的实例代码

    现在有一个使用mybatis的分页插件生成的table,table中数据是通过vue获得的 , 前台显示使用<tr v-for="item in items"> 后台vue获取数据使用分页插件进行查询然后使用回调,将结果返回给vue的一个model /** * 分页控件加载 * @param data */ function aspnetPagerInfoIM(pageDataShow,pageModule,resource, modelCallBack) { var pa

  • PHP添加PNG图片背景透明水印操作类定义与用法示例

    本文实例讲述了PHP添加PNG图片背景透明水印操作类定义与用法.分享给大家供大家参考,具体如下: 图片相关操作类 class ImageTool { private $imagePath;//图片路径 private $outputDir;//输出文件夹 public $memoryImg;//内存图像 public $path; public function __construct($imagePath, $outputDir = null) { $this->imagePath = $im

  • Vue条件循环判断+计算属性+绑定样式v-bind的实例

    Vue.js条件与循环 1.条件判断 (1)v-if, <div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>菜鸟教程</h1> </template> </div> <script> new Vue({ el:'#app', data:{ seen:true,

  • 在vue和element-ui的table中实现分页复选功能

    背景 后台管理系统中,使用表格展示数据时,可能的需求是多项选择然后进行批量操作,也期望能翻页多选. 实现 页面结构如下 <el-table class="table" :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" ref="asTable" > <el-table

随机推荐