402 lines
9.1 KiB
Vue
402 lines
9.1 KiB
Vue
<template>
|
||
<div class="custom-table-container">
|
||
<div class="custom-table-tool">
|
||
<el-form :inline="true" class="demo-form-inline" :label-width="'auto'">
|
||
<el-form-item label="每页显示" style="margin-bottom: 10px">
|
||
<el-select
|
||
v-model="computedPageSize"
|
||
placeholder="请选择"
|
||
style="width: 100px"
|
||
@change="pageSizeChange($event)"
|
||
>
|
||
<el-option
|
||
v-for="item in pageSizes"
|
||
:key="item"
|
||
:label="item + '条'"
|
||
:value="item"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<el-table
|
||
style="flex: 1; display: flex; flex-direction: column; text-align: center"
|
||
:max-height="tableMaxHeight"
|
||
v-loading="loading"
|
||
:data="tableData"
|
||
:border="showBorder"
|
||
:stripe="showStripe"
|
||
:fit="true"
|
||
v-bind="$attrs"
|
||
:header-cell-class-name="headerCellClassName"
|
||
:cell-class-name="cellClassName"
|
||
@selection-change="handleSelectionChange"
|
||
>
|
||
<!-- 首列多选框 -->
|
||
<el-table-column
|
||
v-if="showSelection"
|
||
type="selection"
|
||
width="55"
|
||
align="center"
|
||
/>
|
||
<el-table-column label="序号" width="60" v-if="showSort">
|
||
<template #default="{ $index }">
|
||
{{ (currentPage - 1) * pageSize + $index + 1 }}
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<template v-for="column in columns" :key="column.prop">
|
||
<el-table-column
|
||
:prop="column.prop"
|
||
:label="column.label"
|
||
:width="column.width"
|
||
:align="column.align || 'left'"
|
||
:sortable="column.sortable"
|
||
:header-class-name="column.headerClassName"
|
||
>
|
||
<!-- 支持插槽 -->
|
||
<template v-if="column.slotName" #default="scope">
|
||
<slot :name="column.slotName" :row="scope.row"></slot>
|
||
</template>
|
||
</el-table-column>
|
||
</template>
|
||
</el-table>
|
||
|
||
<div v-if="showPagination" class="pagination-container">
|
||
<span class="custom-pagination-text">
|
||
第{{ currentPage }}页，共{{
|
||
Math.ceil(total / computedPageSize)
|
||
}}页，共{{ total }}条
|
||
</span>
|
||
<div
|
||
style="
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: end;
|
||
text-align: right;
|
||
padding-right: 120px;
|
||
"
|
||
>
|
||
<el-pagination
|
||
v-model:current-page="computedCurrentPage"
|
||
v-model:page-size="computedPageSize"
|
||
:page-sizes="pageSizes"
|
||
:small="small"
|
||
:disabled="disabled"
|
||
:background="background"
|
||
layout="prev, pager, next, jumper"
|
||
:total="total"
|
||
@current-change="handleCurrentChange"
|
||
/>
|
||
<span class="custom-pagination-size">
|
||
{{ computedPageSize }}条/页
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, watch, computed, onMounted, onBeforeUnmount } from "vue";
|
||
|
||
const props = defineProps({
|
||
loading: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
// 表格数据
|
||
tableData: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
// 列配置
|
||
columns: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
// 当前页码（由外部传入）
|
||
currentPage: {
|
||
type: Number,
|
||
default: 1,
|
||
},
|
||
// 每页数量（由外部传入）
|
||
pageSize: {
|
||
type: Number,
|
||
default: 10,
|
||
},
|
||
// 总条数
|
||
total: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
// 是否显示分页
|
||
showPagination: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
// 是否显示边框
|
||
showBorder: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
// 是否显示斑马纹
|
||
showStripe: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
// 是否显示首列多选框
|
||
showSelection: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
// 是否展示序号
|
||
showSort: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
// 每页显示条数选项
|
||
pageSizes: {
|
||
type: Array,
|
||
default: () => [10, 20, 30, 50],
|
||
},
|
||
// 是否使用小型分页样式
|
||
small: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
// 是否禁用
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
// 是否为分页按钮添加背景色
|
||
background: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
// 自定义表头类名函数
|
||
headerCellClassName: {
|
||
type: Function,
|
||
default: () => "",
|
||
},
|
||
// 自定义单元格类名函数
|
||
cellClassName: {
|
||
type: Function,
|
||
default: () => "",
|
||
},
|
||
});
|
||
|
||
const emit = defineEmits([
|
||
"update:currentPage",
|
||
"update:pageSize",
|
||
"page-change",
|
||
"selection-change",
|
||
]);
|
||
|
||
// 每页数量（双向绑定）
|
||
const computedPageSize = computed({
|
||
get: () => props.pageSize,
|
||
set: (val) => emit('update:pageSize', val)
|
||
});
|
||
// 当前页码（双向绑定）
|
||
const computedCurrentPage = computed({
|
||
get: () => props.currentPage,
|
||
set: (val) => emit('update:currentPage', val)
|
||
});
|
||
|
||
// 监听外部传入的pageSize变化
|
||
// watch(
|
||
// () => props.pageSize,
|
||
// (newVal) => {
|
||
// internalPageSize.value = newVal;
|
||
// }
|
||
// );
|
||
|
||
// 分页大小改变
|
||
const pageSizeChange = (val) => {
|
||
console.log(`每页 ${val} 条`);
|
||
internalPageSize.value = val;
|
||
console.log(props.currentPage, internalPageSize.value);
|
||
emit("update:pageSize", val);
|
||
emit("page-change", {
|
||
page: props.currentPage,
|
||
pageSize: val,
|
||
});
|
||
};
|
||
|
||
// 当前页改变
|
||
const handleCurrentChange = (val) => {
|
||
console.log(`当前页改变 ${val} 页`);
|
||
emit("page-change", {
|
||
page: val,
|
||
pageSize: internalPageSize.value,
|
||
});
|
||
};
|
||
|
||
// 多选框变化
|
||
const handleSelectionChange = (selection) => {
|
||
const selectedIds = selection.map((row) => row.id);
|
||
emit("selection-change", selection, selectedIds);
|
||
};
|
||
|
||
const tableRef = ref(null);
|
||
const tableMaxHeight = ref(null); // 使用max-height而不是height
|
||
|
||
// 自动计算最大高度（预留分页器空间）
|
||
const calculateMaxHeight = () => {
|
||
const paginationHeight = 60; // 分页器固定高度
|
||
const container = tableRef.value?.$el?.parentElement;
|
||
if (container) {
|
||
const containerHeight = container.clientHeight;
|
||
tableMaxHeight.value = containerHeight - paginationHeight;
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
calculateMaxHeight();
|
||
window.addEventListener("resize", calculateMaxHeight);
|
||
|
||
// 添加MutationObserver监听父容器尺寸变化
|
||
const observer = new MutationObserver(calculateMaxHeight);
|
||
if (tableRef.value?.$el?.parentElement) {
|
||
observer.observe(tableRef.value.$el.parentElement, {
|
||
attributes: true,
|
||
attributeFilter: ["style", "class"],
|
||
});
|
||
}
|
||
});
|
||
|
||
onBeforeUnmount(() => {
|
||
window.removeEventListener("resize", calculateMaxHeight);
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.custom-table-container {
|
||
// position: relative;
|
||
padding: 10px 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%; /* 关键：继承父容器高度 */
|
||
overflow: hidden; /* 防止内容溢出 */
|
||
|
||
/* 表格弹性布局 */
|
||
:deep(.el-table) {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
/* 表头固定 */
|
||
.el-table__header-wrapper {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 表体可滚动 */
|
||
.el-table__body-wrapper {
|
||
flex: 1;
|
||
overflow: auto;
|
||
}
|
||
}
|
||
|
||
.demo-form-inline {
|
||
text-align: left;
|
||
padding-left: 20px;
|
||
padding-top: 4px;
|
||
}
|
||
|
||
.pagination-container {
|
||
margin-top: 10px;
|
||
padding: 0 30px 0 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #999;
|
||
font-weight: 400;
|
||
}
|
||
.custom-pagination-text {
|
||
flex: 1;
|
||
text-align: left;
|
||
line-height: 32px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.custom-pagination-size {
|
||
text-align: right;
|
||
line-height: 32px;
|
||
margin-left: 20px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 去除表格边框 */
|
||
:deep(.el-table) {
|
||
--el-table-border-color: transparent;
|
||
}
|
||
|
||
/* 自定义鼠标悬停颜色 */
|
||
:deep(.el-table__body tr:hover > td) {
|
||
background-color: rgba(37, 191, 130, 0.1) !important;
|
||
}
|
||
|
||
/* 自定义表头样式 */
|
||
:deep(.custom-header) {
|
||
background-color: #fff !important;
|
||
color: #999;
|
||
font-weight: 400;
|
||
}
|
||
|
||
:deep(.el-pagination) {
|
||
/* 整体分页样式 */
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
|
||
/* 页码按钮容器 */
|
||
.el-pager {
|
||
/* 所有页码项 */
|
||
li {
|
||
font-weight: 400; /* 普通页码字体不加粗 */
|
||
color: #606266; /* 普通页码颜色 */
|
||
background: transparent;
|
||
font-size: 14px;
|
||
|
||
/* 当前选中页码 */
|
||
&.active,
|
||
&.is-active {
|
||
font-weight: 400 !important; /* 当前页不加粗 */
|
||
color: #25bf82 !important; /* 自定义当前页颜色 - 橙色示例 */
|
||
}
|
||
|
||
/* 悬停状态 */
|
||
&:hover {
|
||
color: #409eff;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 上一页/下一页按钮 */
|
||
.btn-prev,
|
||
.btn-next {
|
||
font-weight: 400;
|
||
|
||
&:disabled {
|
||
color: #c0c4cc;
|
||
}
|
||
}
|
||
|
||
/* 每页条数选择器 */
|
||
.el-pagination__sizes {
|
||
.el-input__inner {
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
|
||
/* 跳页输入框 */
|
||
.el-pagination__jump {
|
||
font-weight: 400;
|
||
position: absolute;
|
||
right: 16px;
|
||
bottom: 12px;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
</style>
|