一、定义获取浏览器窗口高度的js文件
相当于用js
实现了 height: calc(100vh - 260px);
的效果
注意:
260 是顶部和底部导航以及部分自定义布局 ;
autoTableHeight.js
//获取浏览器窗口高度,处理Element的Table组件的高度问题(height只能是数字或者字符串)
function autoTableHeight() {
var winHeight = 0;
if (window.innerHeight) {
winHeight = window.innerHeight;
} else if (document.body && document.body.clientHeight) {
winHeight = document.body.clientHeight;
} //通过深入Document内部对body进行检测,获取浏览器窗口高度
if (document.documentElement && document.documentElement.clientHeight) {
winHeight = document.documentElement.clientHeight;
}
// 260 是顶部和底部导航以及部分自定义布局 ;相当于用js实现了 height: calc(100vh - 260px); 的效果
return winHeight - 260;
}
//浏览器窗口变化时
window.onresize = function() {
autoTableHeight();
};
//浏览器重新加载时
window.onload = function() {
autoTableHeight();
};
export default autoTableHeight;
在组件中引入js文件,并给el-table绑定height
- 在组件内部,el-table绑定height,
:height="tableHeight"
- 表格设置height属性后,表头得以固定,且超出该高度会出现滚动条
- 注意,我这里省去了头部和顶部以及侧边栏的代码。
<template>
<div class="inform-manage comn_bg">
<el-table
:data="tableData"
class="multiple-table"
border
:highlight-current-row="true"
:height="tableHeight"
:default-sort="{ prop: 'name', order: 'descending' }"
@sort-change="handleSortChange"
@selection-change="handleSelectionChange"
ref="multipleTable"
tooltip-effect="dark"
style="width: 100%;"
>
<el-table-column
fixed="left"
type="selection"
width="55"
align="center"
></el-table-column>
<el-table-column
sortable
prop="name"
label="通知公告标题"
width="120"
align="center"
></el-table-column>
<el-table-column
sortable
prop="address"
label="发布单位"
align="center"
show-overflow-tooltip
></el-table-column>
<el-table-column
sortable
prop="remark"
label="发布人"
align="center"
width="120"
></el-table-column>
<el-table-column
sortable
prop="date"
label="发布时间"
align="center"
width="120"
></el-table-column>
<el-table-column
sortable
prop="address"
label="内容概述"
align="center"
width="120"
></el-table-column>
<el-table-column
sortable
prop="remark"
label="备注"
align="center"
width="120"
></el-table-column>
<el-table-column sortable label="排序号" width="120" align="center">
<template slot-scope="scope" align="center">
<el-input
class="sort_input"
v-model="scope.row.sortNum"
></el-input>
</template>
</el-table-column>
<el-table-column sortable label="状态" align="center">
<template slot-scope="scope">
<span>{{ scope.row.status | filterStatus }}</span>
</template>
</el-table-column>
<el-table-column sortable label="操作" align="center" width="200">
<template slot-scope="scope">
<button class="download_btn">
<i class="el-icon-download"></i> 下载
</button>
<button class="detail_btn">
<i class="el-icon-tickets"></i> 发布详情
</button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
<script>
import autoTableHeight from "@/utils/autoTableHeight.js"; // 1. 引入刚刚定义的js文件
export default {
data() {
return {
tableData: [
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
remark: "备注信息1",
sortNum: 1,
status: true
},
{
date: "2016-05-02",
name: "张晓",
address: "上海市普陀区金沙江路 1518 弄",
remark: "备注信息2",
sortNum: 2,
status: false
},
{
date: "2016-05-04",
name: "阿厌",
address: "上海市普陀区金沙江路 1518 弄",
remark: "备注信息3",
sortNum: 3,
status: true
}
],
multipleSelection: []
};
},
computed: {
tableHeight() {
return autoTableHeight(); // 2. 调用函数,返回高度
}
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val;
console.log("通知table data:", val);
},
handleSortChange({ column, prop, order }) {
console.log("通知页排序变化:", prop);
}
},
filters: {
filterStatus(status) {
return status ? "已发布" : "待发布";
}
}
};
</script>
<style lang="scss">
.inform-manage {
.download_btn {
background: $icon_color;
border: 1px solid $icon_color;
color: #fff;
padding: 2px;
cursor: pointer;
}
.detail_btn {
background: #ffb800;
border: 1px solid #ffb800;
margin-left: 20px;
color: #fff;
padding: 2px;
cursor: pointer;
}
}
</style>