html表格随着窗口变化,element表格高度随浏览器高度变化

在vue文件中，我们需要给el-table组件绑定一个refs，这样我们就可以通过this.$refs.table1获取到绑定的dom元素

...

新建tools文件，在文件中暴露一个tableHeight函数，如下所示

export function tableHeight(obj) {

return new Promise(resolve => {

var height = window.innerHeight - obj.$refs.table1.$el.offsetTop - 52 - 80 - 50

resolve(height)

})

}

减去的52、80、50分别为底部的分页，表格搜索条件，和面包屑导航的高度

我们在需要的页面上引入该函数，并在页面mounted时获取返回的高度，并给window对象添加事件监听函数onresize，此时绑定的函数不能放到created()钩子函数中，因为此时document还没有生成，我们默认将表格高度设置成100，调用tableHeight函数时将vue对象的引用传入进去，方便获取到表格的dom元素对象，

import { tableHeight } from '@/utils/tools'

data(){

return { tableHeight: 100 }

}

mounted(){

tableHeight(this).then(res => {

this.tableHeight = res

var that = this

window.onresize = () => {

tableHeight(that).then(res2 => {

that.tableHeight = res2

})

}

})

}

这样写完了之后，我们会发现跳转到别的页面上时，会重复触发绑定的window.onresize实践，故我们需要在页面关闭的beforeDestory钩子函数中结束该监听

beforeDestroy() {

window.onresize = null

}

到这里就可以实现该效果了，我们将以上代码封装，使用mixin引入，则不用每个页面都写一次以上代码，只是需要给table添加ref='table1'，data中添加tableHeight，:height="tableHeight"

以下是封装的文件：

import { tableHeight } from '@/utils/tools'

export default {

mounted() {

this.reqList()

tableHeight(this).then(res => {

this.tableHeight = res

var that = this

window.onresize = () => {

tableHeight(that).then(res2 => {

that.tableHeight = res2

})

}

})

},

beforeDestroy() {

window.onresize = null

}

}

在页面中按如下方式引入：

import resizeTable from '@/utils/resizeTable'

export default {

name: 'Index',

mixins: [resizeTable],

...

}

我们还可以在其中添加表格的样式：

...

methods: {

headerStyles() {

return 'headerStyle'

},

cellStyles() {

return 'cellStyle'

}

}

...