add 计算表格最大高度util

This commit is contained in:
g7hoo 2022-08-31 11:21:35 +08:00
parent 974079296b
commit c0900dba9c
2 changed files with 29 additions and 9 deletions

View File

@ -98,3 +98,19 @@ export function treeDataTranslate (data, id = 'id', pid = 'pid') {
}
return res
}
/** 计算表格的最大高 */
export function calcMaxHeight(num) {
const FIXED_HEIGHT = 220
let clientHeight = 0
const bodyHeight = document.body.clientHeight || null
const documentHeight = document.documentElement.clientHeight || null
if (bodyHeight && documentHeight) {
clientHeight = Math.max(bodyHeight, documentHeight)
} else {
clientHeight = documentHeight ? documentHeight : bodyHeight
}
const finalHeight = clientHeight - num - FIXED_HEIGHT
return finalHeight > 0 ? finalHeight : -finalHeight
}

View File

@ -27,7 +27,7 @@
<base-table
:data="dataList"
:table-head-configs="tableConfigs"
:max-height="500"
:max-height="calcMaxHeight(8)"
@operate-event="handleOperations"
@refreshDataList="getDataList"
/>
@ -60,6 +60,7 @@ import TableOperateComponent from '@/components/base-table/components/operationC
import TableTextComponent from '@/components/base-table/components/detailComponent'
import moment from 'moment'
import CKEditor from 'ckeditor4-vue'
import { calcMaxHeight } from '@/utils'
const tableConfigs = [
{
@ -278,6 +279,7 @@ export default {
i18n: i18nLocal,
data() {
return {
calcMaxHeight,
tableConfigs,
addOrUpdateConfigs,
dataForm: {
@ -358,7 +360,9 @@ export default {
})
}).then(({ data }) => {
if (data && data.code === 0) {
this.dataList = data.data.list
// this.dataList = data.data.list
this.dataList = new Array(20).fill('1')
console.log('data list', this.dataList)
this.totalPage = data.data.total
} else {
this.dataList = []