| | |
| | | <template> |
| | | <div class="table-container"> |
| | | <el-table border :data="tableData" :height="height"> |
| | | <el-table border v-bind="$attrs" v-on="$listeners" :height="height"> |
| | | <slot></slot> |
| | | </el-table> |
| | | <div> |
| | | <div v-if="total > 0"> |
| | | <el-pagination layout="slot, prev, pager, next, sizes, jumper" :page-size="queryForm.pageSize" |
| | | :current-page="queryForm.pageNum" :total="total" class="pagination"> |
| | | :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> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import Vue from 'vue'; |
| | | export default { |
| | | props: { |
| | | tableData: { |
| | |
| | | pageNum: 1 |
| | | } |
| | | } |
| | | }, |
| | | height: { |
| | | type: Number, |
| | | default: () => Vue.prototype.$baseTableHeight() |
| | | } |
| | | }, |
| | | computed: { |
| | | height() { |
| | | return this.$baseTableHeight() |
| | | methods: { |
| | | 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 .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; |
| | | |
| | | } |
| | | |
| | | .pagination { |
| | | display: flex; |
| | | justify-content: flex-end; |