<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>