Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）

官方效果是这样的：

此处改成了这样的效果：

此处是可以进行滑动的，就是去除了滑动条，仍能滑动的效果。

下面说下修改样式，找到使用el-table的vue组建：

在style中贴上：

<style>table-wrapper /deep/ .el-table--fit{padding: 20px !important;border: none !important;}.table-wrapper .el-table, .el-table__expanded-cell {background-color: transparent !important;border: none !important;}.table-wrapper /deep/ .el-table tr {background-color: transparent !important;border: none;}.el-table /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{background-color: transparent !important;border: none;}/*表中数据的颜色及背景等*/.el-table th, .el-table tr {border: 0!important;background-color: transparent!important;color: white !important;}/*去每一行记录下的横线*/.el-table--border tr,td{border: none!important;}/*去最下面的横线*/.el-table::before{height:0;}/*table内的高亮*/.el-table tbody tr:hover>td {background-color:rgb(79, 163, 213)!important}</style>

这里在style上不能加scope。

然后在组建外面套一个div在其class上使用table-wrapper：

此处修改样式的逻辑是直接F12，打开开发者工具：

那个css影响了就改哪一个。

修改了的css要使用!important;避免被覆盖。通过这种方式去改element ui中的默认样式。

Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）相关推荐

前端笔记-在Element UI中表格如何根据数据动态变化显示
前言实际上我需要的功能类似于前端工程中的字典.由于在前端的学习自己写代码的过程中可能不会对一个项目工程化的如此的彻底,所以这里给出了一种解决方法. 需求对于Element UI里的表格,如果假设传 ...
修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
Element UI Table表格样式调整
调整Element UI Table表格的样式最终效果: 单元格合并,样式调整模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
在Element UI中表格根据数据动态变化显示表格的内容
需求对于Element UI里的表格,如果假设传入data的数据为数字(事实上其他的字母之类的也可)代表为表格的一些固定选项,而不是直接传入字符串,怎样实现替换.比如对于某个表格的选项,传入的数据用 ...
MOOC Web前端笔记（三）：CSS样式
CSS样式 CSS概述 CSS--Cascading Style Shees层叠样式表 HTML定义网页的内容,CSS定义内容的样式. 内容和样式相互分离,便于修改样式. CSS语法 p为选择器 p{ ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
web前端开发基础——在网页中使用表格
web前端开发基础--在网页中使用表格文章目录 web前端开发基础--在网页中使用表格前言一.表格 1.表格及其基本使用 2.引用css 二.单元格的合并 1.样例 2.样例代码前言本篇主要 ...

Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）

Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）相关推荐

最新文章

热门文章