From fc771fcf71d03ab962be3f26954b7966a243a968 Mon Sep 17 00:00:00 2001
From: LHD_HY <2872546851@qq.com>
Date: Thu, 27 Nov 2025 10:06:10 +0800
Subject: [PATCH] =?UTF-8?q?bug=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/TableModel2/index.vue | 113 +++++++++++----------------
1 file changed, 45 insertions(+), 68 deletions(-)
diff --git a/src/components/TableModel2/index.vue b/src/components/TableModel2/index.vue
index 92e0abc..fe554c7 100644
--- a/src/components/TableModel2/index.vue
+++ b/src/components/TableModel2/index.vue
@@ -33,15 +33,6 @@
start-placeholder="开始日期" end-placeholder="结束日期" v-if="item.f_type === 'dateRange'"
v-model="queryParams[item.f_model]" @change="onChangeTime($event, item.dateType)"
:picker-options="pickerOptions" />
-
@@ -216,6 +207,11 @@ export default {
type: Boolean,
default: false,
},
+ // 表格最大高度（像素），默认600px
+ tableMaxHeight: {
+ type: [Number, String],
+ default: 600,
+ },
// 是否自动加载数据 默认自动加载
autoLoad: {
type: Boolean,
@@ -248,19 +244,20 @@ export default {
},
/* 表格卡片动态高度 */
tableCardStyle() {
+ const baseHeight = this.showSearch ? 200 : 120 // 搜索区域高度
+ const toolbarHeight = this.showRightTools ? 40 : 0 // 工具栏高度
+ const paginationHeight = 60 // 分页区域高度
+ const availableHeight = `calc(100vh - ${baseHeight + toolbarHeight + paginationHeight + 25
+ }px)`
return {
+ height: availableHeight,
display: 'flex',
flexDirection: 'column',
- // 去掉固定高度，让卡片自然适应内容
}
},
/* 表格容器样式 */
tableContainerStyle() {
- return {
- flex: 1, // 占满父元素剩余空间
- overflow: 'auto', // 超出部分显示滚动条
- maxHeight: `calc(100vh - 200px)`, // 可根据实际情况调整
- }
+ return {}
},
},
watch: {
@@ -279,7 +276,6 @@ export default {
},
data() {
return {
- tableMaxHeight: 'calc(100vh - 220px)', // 动态计算最大高度
// 表单校验
formRules: {},
loading: false,
@@ -328,12 +324,9 @@ export default {
/* 生成查询参数 */
this.formLabel.map((e) => {
if (e.f_type === 'dateRange') {
- // 将每组日期的dateType存入二维数组
- this.typeList.push(e.dateType);
- // 初始化查询参数（原逻辑保留）
- this.$set(this.queryParams, e.dateType[0], '');
- this.$set(this.queryParams, e.dateType[1], '');
- this.$set(this.queryParams, e.f_model, []);
+ this.$set(this.queryParams, e.dateType[0], '')
+ this.$set(this.queryParams, e.dateType[1], '')
+ this.typeList = e.dateType
if (this.isOneMonth) {
this.pickerOptions = {
@@ -373,32 +366,21 @@ export default {
this.dynamicWidth = this.getOperatorWidth()
},
methods: {
-
- // 获取年份范围的限制配置
- getYearRangeOptions(item) {
- // 如果是结束年份，限制不能小于开始年份
- if (item.f_model === 'endTime') {
- return {
- disabledDate: (time) => {
- const startYear = this.queryParams.startTime;
- if (!startYear) return false; // 开始年份未选择时不限制
- const currentYear = time.getFullYear();
- return currentYear < Number(startYear); // 结束年份不能小于开始年份
- }
- };
- }
- // 开始年份无限制（或可根据需求添加最大年份限制）
- return {};
- },
-
-
/** 获取列表数据 */
async getTableList() {
try {
+ if (
+ this.queryParams.time &&
+ this.queryParams.time.length !== 0
+ ) {
+ this.queryParams[this.typeList[0]] =
+ this.queryParams.time[0]
+ this.queryParams[this.typeList[1]] =
+ this.queryParams.time[1]
+ }
const params = { ...this.queryParams }
const queryParams = JSON.parse(JSON.stringify(params))
- console.log('查询参数',queryParams)
delete queryParams.time // 剔除无关参数
// 删除日期范围选择器绑定的临时数组字段（如 openTime），保留实际使用的两个字段（如 openStartTime, openEndTime）
this.formLabel.forEach((item) => {
@@ -447,32 +429,29 @@ export default {
/** 重置按钮 */
resetQuery() {
this.$refs.queryFormRef.resetFields()
- // 直接遍历所有日期组，无需判断length
- this.typeList.forEach((dateType) => {
- const [startKey, endKey] = dateType;
- const modelKey = this.formLabel.find(item => item.dateType && item.dateType[0] === startKey)?.f_model;
- this.$set(this.queryParams, startKey, '');
- this.$set(this.queryParams, endKey, '');
- if (modelKey) {
- this.$set(this.queryParams, modelKey, []);
+ if (this.typeList.length > 1) {
+ if (this.isCurrentDate) {
+ this.queryParams[this.typeList[0]] = new Date()
+ .toISOString()
+ .split('T')[0]
+ this.queryParams[this.typeList[1]] = new Date()
+ .toISOString()
+ .split('T')[0]
+ this.queryParams.time = [
+ new Date().toISOString().split('T')[0],
+ new Date().toISOString().split('T')[0],
+ ]
+ } else {
+ this.queryParams[this.typeList[0]] = ''
+ this.queryParams[this.typeList[1]] = ''
+ this.queryParams.time = []
}
- });
- // 处理isCurrentDate场景（如果需要）
- if (this.isCurrentDate && this.typeList.length > 0) {
- const today = new Date().toISOString().split('T')[0];
- this.typeList.forEach((dateType) => {
- const [startKey, endKey] = dateType;
- const modelKey = this.formLabel.find(item => item.dateType && item.dateType[0] === startKey)?.f_model;
- this.$set(this.queryParams, startKey, today);
- this.$set(this.queryParams, endKey, today);
- if (modelKey) {
- this.$set(this.queryParams, modelKey, [today, today]);
- }
- });
+ } else {
+ this.queryParams[this.typeList[0]] = ''
}
- this.queryParams.pageNum = 1;
- this.queryParams.pageSize = 10;
- this.getTableList();
+ this.queryParams.pageNum = 1
+ this.queryParams.pageSize = 10
+ this.getTableList()
},
/** 级联选择 */
handleCas(e, val) {
@@ -697,8 +676,6 @@ export default {
// 新增表格容器样式
.table-container {
width: 100%;
- flex: 1;
- overflow: auto;
::v-deep .el-table {
width: 100%;