增加统一的分页设置

This commit is contained in:
aixianling
2023-01-09 10:17:07 +08:00
parent b576a61551
commit 26ad1124bf

View File

@@ -1,19 +1,18 @@
<template> <template>
<div class="ai-table" :class="[isShowBorder ? 'ai-table__border' : 'ai-table__noborder']"> <div class="ai-table" :class="[isShowBorder ? 'ai-table__border' : 'ai-table__noborder']">
<el-table <el-table :data="tableData"
:data="tableData" header-cell-class-name="ai-table__header"
header-cell-class-name="ai-table__header" cell-class-name="ai-table__cell"
cell-class-name="ai-table__cell" row-class-name="ai-table__row"
row-class-name="ai-table__row" :class="{'ai-header__border': isShowBorder}"
:class="{'ai-header__border': isShowBorder}" :ref="refName"
:ref="refName" :size="tableSize"
:size="tableSize" :stripe="stripe"
:stripe="stripe" :tooltip-effect="tooltipEffect"
:tooltip-effect="tooltipEffect" @selection-change="handleSelectionChange"
@selection-change="handleSelectionChange" v-on="$listeners"
v-on="$listeners" v-bind="$attrs"
v-bind="$attrs" v-loading="loading">
v-loading="loading">
<template v-for="colConfig in colConfigs.filter(e=>!e.hide)"> <template v-for="colConfig in colConfigs.filter(e=>!e.hide)">
<slot v-if="colConfig.slot && colConfig.slot !== 'options'" :name="colConfig.slot"/> <slot v-if="colConfig.slot && colConfig.slot !== 'options'" :name="colConfig.slot"/>
<component <component
@@ -52,7 +51,7 @@
</template> </template>
</el-table-column> </el-table-column>
</template> </template>
<slot class="table-options" name="options"></slot> <slot class="table-options" name="options"/>
<template #empty> <template #empty>
<slot v-if="$scopedSlots.empty" name="empty"/> <slot v-if="$scopedSlots.empty" name="empty"/>
<div v-else class="no-data" style="height:160px;"/> <div v-else class="no-data" style="height:160px;"/>
@@ -61,7 +60,7 @@
<div class="pagination newPagination" v-if="isShowPagination"> <div class="pagination newPagination" v-if="isShowPagination">
<el-pagination <el-pagination
background background
:current-page.sync="page.current" :current-page="page.current"
:total="page.total" :total="page.total"
:page-size="page.size" :page-size="page.size"
v-bind="$attrs" v-bind="$attrs"
@@ -72,8 +71,7 @@
@current-change="handleChange"> @current-change="handleChange">
<div class="paginationPre"> <div class="paginationPre">
<el-checkbox v-if="isHasPaginationBtnsSlot" :disabled="!tableData.length" :indeterminate="isIndeterminate" <el-checkbox v-if="isHasPaginationBtnsSlot" :disabled="!tableData.length" :indeterminate="isIndeterminate"
:value="checkAll" :value="checkAll" @click.native="toggleAllSelection">全选
@click.native="toggleAllSelection">全选
</el-checkbox> </el-checkbox>
<slot name="pagination"/> <slot name="pagination"/>
<div class="pagination-btns"> <div class="pagination-btns">
@@ -112,7 +110,8 @@ export default {
tableRef: String, tableRef: String,
dict: {default: () => dict}, dict: {default: () => dict},
pagerCount: {default: 5}, pagerCount: {default: 5},
pageSizes: {default: () => [10, 20, 50, 100]} pageSizes: {default: () => [10, 20, 50, 100]},
pageConfig: Object
}, },
data() { data() {
return { return {
@@ -150,6 +149,7 @@ export default {
checkAll: v => v.chooseList.length == v.tableData.length && v.tableData !== 0, checkAll: v => v.chooseList.length == v.tableData.length && v.tableData !== 0,
page() { page() {
return { return {
...this.pageConfig,
current: this.current, current: this.current,
size: this.size, size: this.size,
total: this.total, total: this.total,
@@ -158,14 +158,16 @@ export default {
}, },
}, },
methods: { methods: {
handleChange(e) { handleChange(current) {
this.$emit('update:current', e) this.$emit('update:current', current)
this.$emit('update:pageConfig', {...this.pageConfig, current})
this.$nextTick(() => { this.$nextTick(() => {
this.$emit('getList') this.$emit('getList')
}) })
}, },
handleSizeChange(e) { handleSizeChange(size) {
this.$emit('update:size', e) this.$emit('update:size', size)
this.$emit('update:pageConfig', {...this.pageConfig, size})
this.$nextTick(() => { this.$nextTick(() => {
this.$emit('getList') this.$emit('getList')
}) })
@@ -175,16 +177,13 @@ export default {
this.$emit('handleSelectionChange', e) this.$emit('handleSelectionChange', e)
}, },
getValue(colConfig, row) { getValue(colConfig, row) {
if (this.isFunction(colConfig.format)) { if (typeof colConfig.format === 'function') {
return colConfig.format.call(this, row[colConfig.prop]) return colConfig.format.call(this, row[colConfig.prop])
} }
if (colConfig.dateFormat) { if (colConfig.dateFormat) {
return moment(row[colConfig.prop]).format(colConfig.dateFormat) return moment(row[colConfig.prop]).format(colConfig.dateFormat)
} }
return row[colConfig.prop]|| "-" return row[colConfig.prop] || "-"
},
isFunction(fun) {
return typeof fun === 'function'
}, },
/** /**
* 表格方法代理 * 表格方法代理