根据页面动态自适应宽高(window.removeEventListener("resize", 方法名);)
<template> <el-table :height="tableHeight" :data="tableData"> <el-table-column header-align="center" label="序号" align="center" width="50px"> <template slot-scope="scope"> <span>{{scope.$index+(pageIndex - 1) * pageSize + 1}}</span> </template> </el-table-column> ...其他代码 </el-table> </template> <script> export default { data(){ return { windowWidth: "", windowHeight: "",
iptWidth: "",
pageIndex: 1,
pageSize: 10, } }, mounted(){ // 添加监听事件onResize start 缺一不可 this.onResize() window.addEventListener('resize', this.onResize); }, methods: { // 页面缩放时重置高度 onResize() { let that = this; that.windowWidth = document.documentElement.clientWidth; //获取屏幕宽度 that.windowHeight = document.documentElement.clientHeight; //获取屏幕高度 // console.log('屏幕高1=', that.windowHeight); if (that.windowWidth >= 1366 && that.windowWidth <= 1680) that.iptWidth = 200 if (that.windowWidth >= 1680 && that.windowWidth <= 1920) that.iptWidth = 280 this.$nextTick(() => { that.tableHeight = that.windowHeight - 136 }) }, } } </script>