<template>
|
<div class="table-wrapper">
|
<el-table :data="tableData" style="width: 100%" :row-style="getRowClass" :header-row-style="getRowClass" :header-cell-style="getRowClass" >
|
<el-table-column align="center" v-for="(col,index) in headerData" :key="index" :prop="col.prop" :label="col.label" ></el-table-column>
|
</el-table>
|
|
<div class="block flex sb page-table" v-if="pageFlag">
|
<div></div>
|
<el-pagination
|
@current-change="handleCurrentChange"
|
:page-size="pageSize"
|
:current-page="page"
|
layout="total, prev, pager, next"
|
prev-text="上一页"
|
next-text="下一页"
|
:total="totalPages">
|
</el-pagination>
|
</div>
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
props: {
|
/**表格数据*/
|
tableData: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
|
/**表头数据*/
|
headerData: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
/**每页显示数*/
|
pageSize:{
|
type: Number,
|
default:()=>10
|
},
|
/**是否显示页码，默认展示*/
|
pageFlag:{
|
type: Boolean,
|
default:()=>true
|
},
|
/**总条数*/
|
totalNumber:{
|
type: Number,
|
default:()=>100
|
},
|
/**当前页码*/
|
page:{
|
type: Number,
|
default:()=>1
|
}
|
},
|
|
data(){
|
return{
|
|
|
}
|
},
|
computed:{
|
totalPages(){
|
if(this.totalNumber===0)return 0;
|
|
return Math.ceil(this.totalNumber / this.pageSize)
|
}
|
},
|
methods:{
|
getRowClass({ row, column, rowIndex, columnIndex }) {
|
return "background:#042f6d;color:white";
|
},
|
|
handleCurrentChange(val) {
|
this.$emit('getDataList',val)
|
}
|
}
|
}
|
</script>
|
<style scoped>
|
.table-wrapper /deep/ .el-table th.el-table__cell{
|
background-color: #1f2637 !important;
|
}
|
.table-wrapper /deep/ .el-table--enable-row-transition .el-table__body tr {
|
background-color:#182237 !important;
|
}
|
.table-wrapper /deep/ .el-table--enable-row-transition .el-table__body tr:nth-child(2n) {
|
background-color: #141a26 !important;
|
}
|
.table-wrapper /deep/ .el-table td.el-table__cell ,.table-wrapper /deep/ .el-table th.el-table__cell.is-leaf {
|
border:none !important;
|
}
|
.table-wrapper /deep/ .el-table::before {
|
height:0 !important;
|
}
|
.table-wrapper /deep/ .el-table{
|
color:white;
|
}
|
|
.table-wrapper /deep/ tbody tr:hover>td{
|
background-color:rgba(0,0,0,0) !important;
|
border:1px solid red !important;
|
}
|
.page-table /deep/ .el-pagination button,.page-table /deep/ .el-dialog,.page-table /deep/ .el-pager li{
|
background-color: transparent !important;
|
}
|
.page-table /deep/ .el-pagination .btn-next, .page-table /deep/ .el-pagination .btn-prev{
|
color:#C0C4CC
|
}
|
.page-table /deep/ .el-pagination button:disabled{
|
color:#303133;
|
}
|
|
|
|
|
|
|
</style>
|
