mainHeightMixins.js
import { on, off } from '@/lib/tools'
export const maxHeightData = {
data() {
return {
maxHeight: 500,
}
},
methods: {
getmaxHeight() {
let mainEle = document.querySelector('.jz-layout-content') // 可显示区域
let mainHeight =
(mainEle && (mainEle.offsetHeight || mainEle.clientHeight)) || 770
this.maxHeight = mainHeight - 84
},
},
mounted() {
this.$nextTick(() => {
this.getmaxHeight()
})
on(window, 'resize', this.getmaxHeight)
},
beforeDestroy() {
off(window, 'resize', this.getmaxHeight)
},
}
@/lib/tools
/**
* @description 绑定事件 on(element, event, handler)
*/
export const on = (function () {
if (document.addEventListener) {
return function (element, event, handler) {
if (element && event && handler) {
element.addEventListener(event, handler, false)
}
}
} else {
return function (element, event, handler) {
if (element && event && handler) {
element.attachEvent('on' + event, handler)
}
}
}
})()
/**
* @description 解绑事件 off(element, event, handler)
*/
export const off = (function () {
if (document.removeEventListener) {
return function (element, event, handler) {
if (element && event) {
element.removeEventListener(event, handler, false)
}
}
} else {
return function (element, event, handler) {
if (element && event) {
element.detachEvent('on' + event, handler)
}
}
}
})()
系统页面引用
import { maxHeightData } from './mainHeightMixins'
export default {
mixins: [maxHeightData],
}
<el-table :height="maxHeight"></el-table>
文章来源地址https://www.toymoban.com/news/detail-604593.html
文章来源：https://www.toymoban.com/news/detail-604593.html
到了这里，关于element el-table高度自适应的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
