赞
踩
1.通过使用elementUI中的表格,达到我们需要的效果,其中包括对滚动条的修改,以及文字颜色修改等…
2.先看效果,是可以滚动的
HTML
<div class="content_table">
<el-table :data="tableData" border style="width: 100%;background-color:rgba(15, 47, 89, 0.5)" :header-cell-style="{color: '#fff', background: '#071c3c' , border: '1px solid #5c5f6d'}" :row-class-name="tableClass">
<!--:header-cell-style 对表头的设置-->
<el-table-column prop="date" label="日期" align="center"></el-table-column>
<el-table-column prop="name" label="姓名" align="center" ></el-table-column>
<el-table-column prop="address" label="地址" align="center"></el-table-column>
</el-table>
</div>
js代码
tableClass({row}){
if(row.name=='小'){
return 'red'
}else if(row.name=='王'){
return 'orange'
}else{
return ''
}
},
css样式,包括对表格滚动条的样式的修改
/* 表格外部的大小 */ .content_table { width: 95%; height: 75%; margin: 0 auto; position: relative; top: 20%; overflow-y: auto; } /* 对表格背景的修改 */ .content_table /deep/ .el-table, .el-table__expanded-cell { background-color: transparent; } .content_table /deep/ .el-table tr { background-color: transparent !important; } .content_table /deep/ .el-table--enable-row-transition .el-table__body td, .el-table .cell { background-color: transparent; } /* 对线条的修改 */ .content_table /deep/ .el-table__row > td { border: 1px solid #5c5f6d; } /* 清除底部横线 */ .el-table::before { height: 0px; } /* hover到表格的颜色修改 */ .el-table >>> tbody tr:hover > td { background-color: rgba(15, 47, 89, 1) !important; color: #000; } /* 滚动条的样式 */ ::-webkit-scrollbar { /* 纵向滚动条的宽度 */ width: 1px; /* 横向滚动条的宽度 */ /* height: 3px; */ } /* 滚动滑块的颜色 */ ::-webkit-scrollbar-thumb { background-color: #49b1f5; border-radius: 32px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); } /* 滚动条背景颜色 */ ::-webkit-scrollbar-track { background-color: #ececec; border-radius: 32px; } /* 对表格中的文字颜色进行提前设置 */ /deep/ .el-table .red{ color:red !important; } /deep/ .el-table .orange{ color: orange !important; }
如不理解,看看风景,再看一遍…
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。