This commit is contained in:
BianLzhaoMin
parent
654be88752
commit
3a18a1a788
|
|
@ -6,12 +6,12 @@
|
|||
label-width="auto"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
style="margin-top: 20px; padding-left: 20px; display: flex"
|
||||
style="margin-top: 20px; display: flex"
|
||||
>
|
||||
<el-form-item label="月份">
|
||||
<el-date-picker
|
||||
type="month"
|
||||
style="width: 200px"
|
||||
style="width: 160px"
|
||||
value-format="yyyy-MM"
|
||||
v-model="queryParams.month"
|
||||
placeholder="请选择月份"
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<el-form-item label="分包名称">
|
||||
<el-input
|
||||
clearable
|
||||
style="width: 200px"
|
||||
style="width: 160px"
|
||||
placeholder="请输入分包名称"
|
||||
v-model.trim="queryParams.subName"
|
||||
/>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<el-form-item label="班组名称">
|
||||
<el-input
|
||||
clearable
|
||||
style="width: 200px"
|
||||
style="width: 160px"
|
||||
placeholder="请输入班组名称"
|
||||
v-model.trim="queryParams.teamName"
|
||||
/>
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
<el-form-item label="施工人员">
|
||||
<el-input
|
||||
clearable
|
||||
style="width: 200px"
|
||||
style="width: 160px"
|
||||
placeholder="请输入施工人员"
|
||||
v-model.trim="queryParams.workerName"
|
||||
/>
|
||||
|
|
@ -63,14 +63,24 @@
|
|||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
ref="tableRef"
|
||||
border
|
||||
stripe
|
||||
style="width: 100%"
|
||||
:data="tableList"
|
||||
:header-cell-style="tableHeaderStyle"
|
||||
:cell-style="tableCellStyle"
|
||||
:max-height="tableMaxHeight"
|
||||
v-loading="loading"
|
||||
>
|
||||
<el-table-column
|
||||
label="序号"
|
||||
align="center"
|
||||
width="50"
|
||||
type="index"
|
||||
fixed="left"
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
align="center"
|
||||
:key="item.prop"
|
||||
|
|
@ -162,6 +172,7 @@ export default {
|
|||
},
|
||||
],
|
||||
attendanceDays: 0,
|
||||
tableMaxHeight: 500, // 默认高度，会在 mounted 时重新计算
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -179,6 +190,16 @@ export default {
|
|||
this.getCurrentMonthDays()
|
||||
this.getAttOverviewList()
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableMaxHeight()
|
||||
})
|
||||
// 监听窗口大小改变
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.handleResize)
|
||||
},
|
||||
methods: {
|
||||
getCurrentMonthDays() {
|
||||
if (!this.queryParams.month) {
|
||||
|
|
@ -254,8 +275,102 @@ export default {
|
|||
this.tableList = []
|
||||
} finally {
|
||||
this.loading = false
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableMaxHeight()
|
||||
// 数据加载完成后，延迟调整表格高度
|
||||
setTimeout(() => {
|
||||
const calculatedMaxHeight = this.tableMaxHeight
|
||||
this.adjustTableHeightByContent(calculatedMaxHeight)
|
||||
}, 300)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 计算表格最大高度
|
||||
calculateTableMaxHeight() {
|
||||
this.$nextTick(() => {
|
||||
const container = this.$el
|
||||
if (!container) return
|
||||
|
||||
// 获取表单元素和表格元素
|
||||
const formEl = this.$refs.queryFormRef?.$el
|
||||
const tableEl = this.$refs.tableRef?.$el
|
||||
|
||||
if (!formEl) {
|
||||
// 如果没有表单，使用容器高度
|
||||
const containerHeight =
|
||||
container.clientHeight || container.offsetHeight
|
||||
this.tableMaxHeight = Math.max(containerHeight - 100, 300)
|
||||
return
|
||||
}
|
||||
|
||||
// 获取容器和表单的位置信息
|
||||
const containerRect = container.getBoundingClientRect()
|
||||
const formRect = formEl.getBoundingClientRect()
|
||||
|
||||
// 计算从表单底部到容器底部的距离
|
||||
// 使用 getBoundingClientRect 获取精确的位置
|
||||
const formBottom = formRect.bottom
|
||||
const containerBottom = containerRect.bottom
|
||||
|
||||
// 计算可用高度：容器底部 - 表单底部 - 预留空间
|
||||
// 预留一些空间确保底部不被截断（包括可能的边框、间距等）
|
||||
const reservedSpace = 15
|
||||
const availableHeight =
|
||||
containerBottom - formBottom - reservedSpace
|
||||
|
||||
// 设置最小高度，确保表格至少能显示几行数据
|
||||
const calculatedMaxHeight = Math.max(availableHeight, 300)
|
||||
|
||||
// 延迟检查表格实际内容高度，如果内容不足，使用实际高度
|
||||
setTimeout(() => {
|
||||
this.adjustTableHeightByContent(calculatedMaxHeight)
|
||||
}, 200)
|
||||
})
|
||||
},
|
||||
// 根据表格实际内容调整高度，避免内容不足时的违和感
|
||||
adjustTableHeightByContent(calculatedMaxHeight) {
|
||||
const tableEl = this.$refs.tableRef?.$el
|
||||
if (!tableEl) {
|
||||
this.tableMaxHeight = calculatedMaxHeight
|
||||
return
|
||||
}
|
||||
|
||||
// 获取表格头部高度
|
||||
const tableHeader = tableEl.querySelector(
|
||||
'.el-table__header-wrapper',
|
||||
)
|
||||
const headerHeight = tableHeader ? tableHeader.offsetHeight : 0
|
||||
|
||||
// 获取表格内容实际高度
|
||||
const tableBodyWrapper = tableEl.querySelector(
|
||||
'.el-table__body-wrapper',
|
||||
)
|
||||
if (!tableBodyWrapper) {
|
||||
this.tableMaxHeight = calculatedMaxHeight
|
||||
return
|
||||
}
|
||||
|
||||
// 获取表格内容高度（包括所有行）
|
||||
const bodyHeight = tableBodyWrapper.scrollHeight
|
||||
|
||||
// 计算表格实际需要的高度（头部 + 内容）
|
||||
const actualHeight = headerHeight + bodyHeight
|
||||
|
||||
// 如果实际高度小于计算出的最大高度，使用实际高度（避免底部空白）
|
||||
// 如果实际高度大于等于最大高度，使用计算出的最大高度（启用滚动）
|
||||
if (actualHeight > 0 && actualHeight < calculatedMaxHeight) {
|
||||
// 添加一点边距，让表格看起来更自然
|
||||
this.tableMaxHeight = actualHeight + 2
|
||||
} else {
|
||||
this.tableMaxHeight = calculatedMaxHeight
|
||||
}
|
||||
},
|
||||
// 处理窗口大小改变
|
||||
handleResize() {
|
||||
this.$nextTick(() => {
|
||||
this.calculateTableMaxHeight()
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -266,12 +381,20 @@ export default {
|
|||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.table-container {
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0; // 重要：允许 flex 子元素缩小
|
||||
|
||||
::v-deep .el-table {
|
||||
border: none;
|
||||
width: 100%;
|
||||
|
||||
.el-table__header-wrapper {
|
||||
.el-table__header {
|
||||
|
|
|
|||
|
|
@ -68,6 +68,13 @@
|
|||
:header-cell-style="tableHeaderStyle"
|
||||
:cell-style="tableCellStyle"
|
||||
>
|
||||
<el-table-column
|
||||
label="序号"
|
||||
align="center"
|
||||
width="50"
|
||||
type="index"
|
||||
fixed="left"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
:key="item.prop"
|
||||
|
|
|
|||
Loading…
Reference in New Issue