diff --git a/src/views/index/index.vue b/src/views/index/index.vue index 0d76f4e..db33f5f 100644 --- a/src/views/index/index.vue +++ b/src/views/index/index.vue @@ -23,7 +23,7 @@
- @@ -429,7 +429,8 @@ export default { enlargeImgShow: false, enlargeImg: '', top: '', - remark_level:[]//绩效提成经营分析品线等级下拉选择 + tableHeight: 700, // 表格高度,会动态计算 + remark_level: [] // 绩效提成经营分析品线等级下拉选择 } }, computed: { @@ -449,12 +450,36 @@ export default { created () { this.getList() }, + mounted() { + // 组件挂载后计算表格高度 + this.calculateTableHeight(); + // 监听窗口大小变化,动态调整表格高度 + window.addEventListener('resize', this.calculateTableHeight); + }, + beforeDestroy() { + // 组件销毁前移除事件监听 + window.removeEventListener('resize', this.calculateTableHeight); + }, methods: { updateRemark(val, rowIndex){ // 根据选中的二级品线查找对应的一级品线 const item = this.remark_level.find(i => i && i.remark_two === val.value); this.tableData[rowIndex].remark1 = item.remark_one; }, + // 计算表格自适应高度 + calculateTableHeight() { + // 获取浏览器窗口高度 + const windowHeight = window.innerHeight; + // 获取表格容器上方元素的高度(这里需要根据实际情况调整) + // 假设上方操作栏和标题区域大约占用200px + const headerHeight = 200; + // 计算表格可用高度,减去一些边距和预留空间 + this.tableHeight = windowHeight - headerHeight - 30; // 30px作为底部边距预留 + // 确保表格高度不会太小 + if (this.tableHeight < 300) { + this.tableHeight = 300; + } + }, enlarge (e, row) { console.log(e) this.enlargeImg = row.picture