element表格高度随浏览器高度变化

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

<el-table ref="table1" :height="tableHeight" :data="tableData">
...
</el-table>

新建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'
    }
  }
...