Element Table 表格设置滚动条以及修改边框颜色

本文中使用element UI表格，需求是给表格设置滚动条。查找了一些方法，包括查找插件解决效果都达不到要求。特此写下此文，便于日后使用和学习交流。

一、需要实现的效果图

二、直接上代码

app是是挂载的页面最外层选择器，加上 /deep/ （样式穿透）是为了在项目中起到不污染其它组件样式的作用，并不是必须，如果使用需要在前后都加上空格符号。
主要代码【第一种】：

#app /deep/ .el-table__body-wrapper {height: 200px; /* 滚动条整体高 必须项 */border-right: none;overflow-y: scroll;/* overflow-y为了不出现水平滚动条*/}#app /deep/ .el-table__body-wrapper::-webkit-scrollbar {width: 5px;/* 滚动条的宽高 必须项 */height: 5px;}#app /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {background-color: #bfcbd9;/* 滚动条的宽 */border-radius: 3px;}

主要代码【第二种】：

// 滚动条样式#app /deep/ .el-table__body-wrapper::-webkit-scrollbar {width: 8px; /*滚动条宽度*/height: 12px; /*滚动条高度*/}#app  /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 10px; /*滚动条的背景区域的圆角*/background-color: #eeeeee; /*滚动条的背景颜色*/}#app /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {border-radius: 10px; /*滚动条的圆角*/-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: #409eff; /*滚动条的背景颜色*/}

修改表格边框颜色：

// 表框颜色/deep/ .el-table td,/deep/ .el-table th.is-leaf,/deep/ .el-table--border,/deep/ .el-table--group {border-color: #409eff;}/deep/ .el-table--border::after,/deep/ .el-table--group::after,/deep/ .el-table::before {background-color: #409eff;}

整个demo代码附上：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- import Vue before Element --><script src="https://unpkg.com/vue/dist/vue.js"></script><!-- 引入组件库element --><script src="https://unpkg.com/element-ui/lib/index.js"></script><title>Document</title><style>#app /deep/ .el-table__body-wrapper {height: 200px; /* 滚动条整体高 必须项 */border-right: none;overflow-y: scroll;/* overflow-y为了不出现水平滚动条*/}#app /deep/ .el-table__body-wrapper::-webkit-scrollbar {width: 5px;/* 滚动条的宽高 必须项 */height: 5px;}#app /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {background-color: #bfcbd9;/* 滚动条的宽 */border-radius: 3px;}</style>
</head>
<body><div id="app"><el-table :data="tableData" border style="width: 600px"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div><script>new Vue({el: "#app",data: {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}})</script>
</body>
</html>

以上，使用谷歌浏览器效果正常实现，未做其它浏览器兼容核实。

Element Table 表格设置滚动条以及修改边框颜色相关推荐

element table 表格设置max-height 没有出现滚动条，多渲染了一列。
个人理解: 设置max-height后会多渲染一列,这一列应该是用来承载滚动条的,但是因为某种原因,滚动条没有被渲染出来,就出现了多渲染了一列,这一列里面没用任何东西. 设置后效果图: 样式代码: / ...
html table表格设置滚动条
table对tbody进行设置使其能够进行滚动. 示例一: 效果如下: 代码如下: <!DOCTYPE HTML> <html> <head><meta ht ...
在PHP中给表格加上css样式,表格CSS样式设置给table表格设置CSS样式表
表格table tr td CSS花色设置给table表格设置CSS花式表在一个网页中多处运用了表格table标签,这个时候给指定的表格对象设置装备摆设款式仿照照旧概略经由CSS发展管束配置. 着 ...
element table表格里的多选按钮，根据条件判断是否可以被选中
element table表格里的多选按钮,根据条件判断是否可以被选中 <el-table v-loading="loading" :data="contentLi ...
table表格加滚动条
<HTML><HEAD><TITLE>table表格加滚动条</TITLE> <META http-equiv=Content-Type cont ...
layui table 表格设置透明
layui table 表格设置透明通过css来控制,直接上代码通过css来控制,直接上代码首先需要将table标签放入div中,div增加class名称 transparentDataTabl ...
自定义UISearchBar 适配IOS6和IOS7 修改放大镜图标修改光标颜色修改边框颜色 placeholder颜色设置文本框背景
文章转自:http://blog.csdn.net/zhang_red/article/details/21447535 总结下常用的几点: 1.修改放大镜图标 [self setImage:[UII ...
winformbutton边框怎么改_C# WinForm窗体控件Panel修改边框颜色以及边框宽度方法
C# WinForm窗体控件Panel修改边框颜色以及边框宽度方法 1.新建组件这里可以自定义一个Panel控件起名为PanelEx 2.增加一个BoderColor属性和BoderSize属性 pr ...
android 按钮修改边框颜色代码,Android CheckBox修改大小、边框颜色，以及自定义CheckBox；...
CheckBox修改大小: android:scaleX="0.8" android:scaleY="0.8" CheckBox修改边框颜色,注意不是背景色: ...

Element Table 表格设置滚动条以及修改边框颜色

一、需要实现的效果图

二、直接上代码

Element Table 表格设置滚动条以及修改边框颜色相关推荐

最新文章

热门文章

Element Table 表格 设置滚动条以及修改边框颜色

一、需要实现的效果图

二、直接上代码

Element Table 表格 设置滚动条以及修改边框颜色相关推荐

最新文章

热门文章

Element Table 表格设置滚动条以及修改边框颜色

Element Table 表格设置滚动条以及修改边框颜色相关推荐