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、效果圖如下:
image.png