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