mainHeightMixins.js
import { on, off } from '@/lib/tools'
export const maxHeightData = {
data() {
return {
maxHeight: 500,
}
},
methods: {
getmaxHeight() {
let mainEle = document.querySelector('.jz-layout-content') // 可顯示區(qū)域
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)
}
}
}
})()
系統(tǒng)頁(yè)面引用
import { maxHeightData } from './mainHeightMixins'
export default {
mixins: [maxHeightData],
}
<el-table :height="maxHeight"></el-table>
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-604593.html
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-604593.html
到了這里，關(guān)于element el-table高度自適應(yīng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
