<template>
|
<div class="table-container" style="width: 100%;">
|
<el-table ref="elTable" border v-bind="$attrs" v-on="$listeners" :height="height">
|
<slot></slot>
|
</el-table>
|
<div v-if="total > 0">
|
<el-pagination layout="slot, prev, pager, next, sizes, jumper" :page-size="queryForm.pageSize"
|
:current-page="queryForm.pageNum" :total="total" @current-change="handleCurrentChange"
|
@size-change="handleSizeChange" class="pagination">
|
<div class="pagination-info">第 {{ (queryForm.pageNum == 1) ? 1 : (queryForm.pageNum - 1) *
|
queryForm.pageSize + 1 }}-{{
|
queryForm.pageNum * queryForm.pageSize }} 条/总共 {{ total }} 条</div>
|
</el-pagination>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Vue from 'vue';
|
export default {
|
props: {
|
tableData: {
|
type: Array,
|
default: () => []
|
},
|
total: {
|
type: Number,
|
default: 0
|
},
|
queryForm: {
|
type: Object,
|
default: () => {
|
return {
|
pageSize: 10,
|
pageNum: 1
|
}
|
}
|
},
|
height: {
|
type: Number,
|
default: () => Vue.prototype.$baseTableHeight()
|
}
|
},
|
methods: {
|
toggleRowSelection(row, selected) {
|
this.$refs.elTable.toggleRowSelection(row, selected)
|
this.$forceUpdate()
|
},
|
clearSelection() {
|
this.$refs.elTable.clearSelection()
|
this.$forceUpdate()
|
},
|
handleCurrentChange(page) {
|
this.$emit('handleCurrentChange', page)
|
},
|
handleSizeChange(size) {
|
this.$emit('handleSizeChange', size)
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
::v-deep .select-row {
|
background: #E6FFFF !important;
|
}
|
|
.el-table--border,
|
.el-table--group {
|
border-radius: 8px 8px 0px 0px;
|
|
::v-deep thead {
|
tr {
|
th {
|
background: #FAFAFA !important;
|
}
|
}
|
}
|
}
|
|
::v-deep .el-checkbox__inner:hover {
|
border-color: #049C9A !important;
|
}
|
|
::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
|
border-color: #049C9A !important;
|
}
|
|
|
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
|
background-color: #049C9A !important;
|
border-color: #049C9A !important;
|
}
|
|
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
background-color: #049C9A !important;
|
border-color: #049C9A !important;
|
|
}
|
|
::v-deep .el-table__expanded-cell {
|
padding: 0;
|
}
|
|
::v-deep .el-table .el-table__expand-icon {
|
display: none;
|
}
|
|
.pagination {
|
display: flex;
|
justify-content: flex-end;
|
margin-top: 16px;
|
|
.pagination-info {
|
font-weight: 400;
|
font-size: 14px;
|
color: rgba(0, 0, 0, 0.88);
|
line-height: 24px;
|
}
|
|
::v-deep .el-pager li {
|
padding: 0 !important;
|
min-width: 24px !important;
|
height: 24px !important;
|
line-height: 24px !important;
|
|
&:hover {
|
color: #049C9A !important;
|
}
|
}
|
|
::v-deep .el-pager .active {
|
color: #049C9A !important;
|
border-radius: 6px !important;
|
border: 1px solid #049C9A !important;
|
}
|
|
::v-deep .el-pagination__jump {
|
margin-left: 0 !important;
|
|
.el-input__inner:focus {
|
border: 1px solid #049C9A !important;
|
}
|
}
|
|
::v-deep .el-pagination__sizes .el-input .el-input__inner {
|
color: #049C9A !important;
|
border-color: #049C9A !important;
|
|
&:hover {
|
color: #049C9A !important;
|
border-color: #049C9A !important;
|
}
|
|
&:focus {
|
color: #049C9A !important;
|
border-color: #049C9A !important;
|
}
|
}
|
|
::v-deep button:hover {
|
color: #049C9A !important;
|
}
|
}
|
</style>
|
