add 计算表格最大高度util

src/utils/index.js

@@ -5,7 +5,7 @@ import store from '@/store'
  * 权限
  * @param {*} key
  */
-export function hasPermission (key) {
+export function hasPermission(key) {
   return window.SITE_CONFIG['permissions'].indexOf(key) !== -1 || false
 }
 
@@ -13,7 +13,7 @@ export function hasPermission (key) {
  * 获取字典数据列表
  * @param dictType  字典类型
  */
-export function getDictDataList (dictType) {
+export function getDictDataList(dictType) {
   const type = window.SITE_CONFIG['dictList'].find((element) => (element.dictType === dictType))
   if (type) {
     return type.dataList
@@ -27,7 +27,7 @@ export function getDictDataList (dictType) {
  * @param dictType  字典类型
  * @param dictValue  字典值
  */
-export function getDictLabel (dictType, dictValue) {
+export function getDictLabel(dictType, dictValue) {
   const type = window.SITE_CONFIG['dictList'].find((element) => (element.dictType === dictType))
   if (type) {
     const val = type.dataList.find((element) => (element.dictValue === dictValue + ''))
@@ -44,7 +44,7 @@ export function getDictLabel (dictType, dictValue) {
 /**
  * 清除登录信息
  */
-export function clearLoginInfo () {
+export function clearLoginInfo() {
   store.commit('resetStore')
   Cookies.remove('token')
   window.SITE_CONFIG['dynamicMenuRoutesHasAdded'] = false
@@ -54,7 +54,7 @@ export function clearLoginInfo () {
 /**
  * 获取uuid
  */
-export function getUUID () {
+export function getUUID() {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
     return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
   })
@@ -63,7 +63,7 @@ export function getUUID () {
 /**
  * 获取svg图标(id)列表
  */
-export function getIconList () {
+export function getIconList() {
   var res = []
   var list = document.querySelectorAll('svg symbol')
   for (var i = 0; i < list.length; i++) {
@@ -79,7 +79,7 @@ export function getIconList () {
  * @param {*} id
  * @param {*} pid
  */
-export function treeDataTranslate (data, id = 'id', pid = 'pid') {
+export function treeDataTranslate(data, id = 'id', pid = 'pid') {
   var res = []
   var temp = {}
   for (var i = 0; i < data.length; i++) {
@@ -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
+}

src/views/modules/monitoring/equipment.vue

@@ -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 = []