1、template
模板中引用table
组件,代码如下:
<template>
<div>
<Table
border
ref="selection"
:height="400"
:columns="columns4"
:data="data1"
class="table-css">
</Table>
</div>
</template>
2、style(scoped)
样式表中修改表格样式,代码如下:
<style scoped>
/* 表格样式 */
.table-css >>> .ivu-table {
color: #409EFF;
background-image:url('../../../assets/images/login-bg.jpg');
background-size: 100% 100%;
}
.table-css >>> .ivu-table th {
border-bottom: 1px solid #000;
border-right: 0px;
background-color: transparent;
}
.table-css >>> .ivu-table td {
border-bottom: 1px solid #000;
border-right: 0px;
background-color: transparent;
}
.table-css >>> .ivu-checkbox-inner{
background-color: #111C49;
border: 1px solid #409EFF;
}
.table-css >>> .ivu-checkbox-checked .ivu-checkbox-inner:after {
border-right-color: #409EFF;
border-bottom-color: #409EFF;
}
/* 滚动条 */
.table-css >>> .ivu-table-overflowY::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.table-css >>> .ivu-table-overflowY::-webkit-scrollbar-thumb {
border-radius: 5px;
background: red;
}
.table-css >>> .ivu-table-overflowY::-webkit-scrollbar-track {
background: #111C49;
}
.table-css >>> .ivu-table-overflowY::-webkit-scrollbar-corner {
background-color: #111C49;
}
.table-css >>> .ivu-table-overflowX::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.table-css >>> .ivu-table-overflowX::-webkit-scrollbar-thumb {
border-radius: 5px;
background: red;
}
.table-css >>> .ivu-table-overflowX::-webkit-scrollbar-track {
background: #111C49;
}
.table-css >>> .ivu-table-overflowX::-webkit-scrollbar-corner {
background-color: #111C49;
}
</style>
3、效果图如下: