|
|
@@ -68,14 +68,14 @@
|
|
|
>
|
|
|
<!-- 默认插槽 -->
|
|
|
<slot />
|
|
|
- <template v-for="item in tableColumns" :key="item">
|
|
|
+ <template v-for="item in tableColumns">
|
|
|
<!-- selection || radio || index || expand || sort -->
|
|
|
<el-table-column
|
|
|
v-if="item.type && columnTypes.includes(item.type)"
|
|
|
v-bind="item"
|
|
|
:align="item.align ?? 'left'"
|
|
|
:reserve-selection="item.type == 'selection'"
|
|
|
- :key="item.prop"
|
|
|
+ :key="item.prop"
|
|
|
>
|
|
|
<template #default="scope">
|
|
|
<!-- expand -->
|
|
|
@@ -107,14 +107,20 @@
|
|
|
</el-table>
|
|
|
<!-- 分页组件 -->
|
|
|
<slot name="pagination">
|
|
|
- <PaginationEl
|
|
|
- v-if="pagination"
|
|
|
- @pagination="onRefresh"
|
|
|
- :total="total"
|
|
|
- v-model:current-page="pageIndex"
|
|
|
- v-model:page-size="pageSize"
|
|
|
- :layout="paginationLayout"
|
|
|
- />
|
|
|
+ <div class="pagination-container">
|
|
|
+ <el-pagination
|
|
|
+ :background="background"
|
|
|
+ v-model:current-page="pageIndex"
|
|
|
+ v-model:page-size="pageSize"
|
|
|
+ :layout="pageLayout"
|
|
|
+ :total="total"
|
|
|
+ :page-sizes="pageSizes"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :disabled="loading"
|
|
|
+ :key="pageLayout"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</slot>
|
|
|
</div>
|
|
|
<!-- 列设置 -->
|
|
|
@@ -126,7 +132,6 @@ import { ref, provide, onMounted, unref, computed, reactive, PropType, watch } f
|
|
|
import { ElMessageBox, ElTable } from 'element-plus';
|
|
|
import { useSelection } from '@/hooks/useSelection';
|
|
|
import { ColumnProps, TypeProps } from '@/components/ProTable/interface';
|
|
|
-import PaginationEl from './components/Pagination.vue';
|
|
|
import ColSettingCom from './components/ColSetting.vue';
|
|
|
import TableColumn from './components/TableColumn.vue';
|
|
|
import { downloadFileByStream } from '@/utils/tools';
|
|
|
@@ -150,21 +155,6 @@ const props = defineProps({
|
|
|
type: Boolean,
|
|
|
default: true,
|
|
|
},
|
|
|
- total: {
|
|
|
- // 分页组件的 total ==> 非必传（默认为0）
|
|
|
- type: Number,
|
|
|
- default: 0,
|
|
|
- },
|
|
|
- pageIndex: {
|
|
|
- // 分页组件的 currentPage ==> 非必传（默认为1）
|
|
|
- type: Number,
|
|
|
- default: 1,
|
|
|
- },
|
|
|
- pageSize: {
|
|
|
- // 分页组件的 pageSize ==> 非必传（默认为10）
|
|
|
- type: Number,
|
|
|
- default: 10,
|
|
|
- },
|
|
|
border: {
|
|
|
// 是否带有纵向边框 ==> 非必传（默认为false）
|
|
|
type: Boolean,
|
|
|
@@ -191,11 +181,6 @@ const props = defineProps({
|
|
|
type: String,
|
|
|
default: '',
|
|
|
},
|
|
|
- paginationLayout: {
|
|
|
- // 分页组件布局
|
|
|
- type: String,
|
|
|
- default: 'total, sizes, prev, pager, next, jumper',
|
|
|
- },
|
|
|
exportWithParent: {
|
|
|
// 导出是否带有子父级关系
|
|
|
type: Boolean,
|
|
|
@@ -216,6 +201,32 @@ const props = defineProps({
|
|
|
type: Boolean,
|
|
|
default: false,
|
|
|
},
|
|
|
+ total: {
|
|
|
+ type: Number,
|
|
|
+ default: 0,
|
|
|
+ },
|
|
|
+ pageIndex: {
|
|
|
+ type: Number,
|
|
|
+ default: 1,
|
|
|
+ },
|
|
|
+ pageSize: {
|
|
|
+ type: Number,
|
|
|
+ default: 10,
|
|
|
+ },
|
|
|
+ pageSizes: {
|
|
|
+ type: Array,
|
|
|
+ default() {
|
|
|
+ return [10, 20, 50, 100, 200];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ layout: {
|
|
|
+ type: String,
|
|
|
+ default: 'total, sizes, prev, pager, next, jumper',
|
|
|
+ },
|
|
|
+ background: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
});
|
|
|
const emit = defineEmits([
|
|
|
'dargSort',
|
|
|
@@ -228,6 +239,8 @@ const emit = defineEmits([
|
|
|
'update:pageSize',
|
|
|
'update:pageIndex',
|
|
|
'update:radio',
|
|
|
+ 'update:total',
|
|
|
+ 'pagination',
|
|
|
]);
|
|
|
const pageSize = computed({
|
|
|
get() {
|
|
|
@@ -245,6 +258,26 @@ const pageIndex = computed({
|
|
|
emit('update:pageIndex', val);
|
|
|
},
|
|
|
});
|
|
|
+const handleSizeChange = (val: any) => {
|
|
|
+ pageSize.value = val;
|
|
|
+ /**
|
|
|
+ * 场景：API返回总数为25条，按照10条每页，一共有3页。选了2的页数之后，然后把size选择成30条，
|
|
|
+ * 这个时候，分页就会同时触发size选择函数以及current选择函数。{page: 2, size: 30}，{page: 1, size: 30}请求两次，会导致列表会有暂无数据的情况
|
|
|
+ * 解决办法：如果当前页大于最大页数，就把当前页设置成最大页数
|
|
|
+ */
|
|
|
+ // 获取最大页数
|
|
|
+ let pageMax = Math.ceil(props.total / val);
|
|
|
+ if (pageIndex.value > pageMax) {
|
|
|
+ pageIndex.value = pageMax;
|
|
|
+ }
|
|
|
+ onRefresh();
|
|
|
+ emit('pagination', { page: pageIndex.value, limit: val });
|
|
|
+};
|
|
|
+const handleCurrentChange = (val: any) => {
|
|
|
+ pageIndex.value = val;
|
|
|
+ onRefresh();
|
|
|
+ emit('pagination', { page: val, limit: pageSize.value });
|
|
|
+};
|
|
|
const radio = computed({
|
|
|
get() {
|
|
|
return props.radio;
|
|
|
@@ -270,9 +303,24 @@ const { selectionChange, selectedList, selectedListIds, isSelected } = useSelect
|
|
|
// 清空选中数据列表
|
|
|
const clearSelection = () => tableRef.value!.clearSelection();
|
|
|
// 初始化表格数据 && 拖拽排序
|
|
|
+const pageLayout = ref(props.layout);
|
|
|
+// 监听 props.value 的变化，并更新 localValue
|
|
|
+watch(
|
|
|
+ () => props.layout,
|
|
|
+ (newValue) => {
|
|
|
+ pageLayout.value = newValue;
|
|
|
+ }
|
|
|
+);
|
|
|
onMounted(() => {
|
|
|
- useResizeObserver(tableRef, () => {
|
|
|
- tableRef.value.doLayout();
|
|
|
+ useResizeObserver(tableRef, (entries) => {
|
|
|
+ const entry = entries[0];
|
|
|
+ const { width } = entry.contentRect;
|
|
|
+ if (width < 992) {
|
|
|
+ pageLayout.value = 'total , prev, next';
|
|
|
+ } else {
|
|
|
+ pageLayout.value = 'total, sizes, prev, pager, next, jumper';
|
|
|
+ }
|
|
|
+ tableRef.value?.doLayout();
|
|
|
});
|
|
|
});
|
|
|
// 处理表格数据
|
|
|
@@ -336,7 +384,7 @@ const searchColumns = computed(() => {
|
|
|
});
|
|
|
|
|
|
// 设置 搜索表单默认排序 && 搜索表单项的默认值
|
|
|
-searchColumns.value?.forEach((column, index) => {});
|
|
|
+searchColumns.value?.forEach(() => {});
|
|
|
|
|
|
// 列设置 ==> 需要过滤掉不需要设置的列
|
|
|
const colRef = ref();
|
|
|
@@ -364,7 +412,7 @@ const updateColSetting = (test: ColumnProps[]) => {
|
|
|
// 递归获取isShow的列保持子父级关系
|
|
|
const findItems = (tree: any, conditionFn: (item: any) => boolean, parent: any = null) => {
|
|
|
let results: [] = [];
|
|
|
- for (let node: any of tree) {
|
|
|
+ for (let node of tree) {
|
|
|
// 如果当前节点满足条件，则将其添加到结果中，并保留父级关系
|
|
|
if (conditionFn(node)) {
|
|
|
results.push(node);
|
|
|
@@ -633,5 +681,10 @@ const height = computed(() => {
|
|
|
.table-search-content {
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
+ .pagination-container {
|
|
|
+ padding-top: 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
zhangchong
