一、定义获取浏览器窗口高度的js文件
相当于用js实现了 height: calc(100vh - 260px); 的效果
注意： 260 是顶部和底部导航以及部分自定义布局 ；
autoTableHeight.js
function autoTableHeight() {
var winHeight
= 0;
if (window
.innerHeight
) {
winHeight
= window
.innerHeight
;
} else if (document
.body
&& document
.body
.clientHeight
) {
winHeight
= document
.body
.clientHeight
;
}
if (document
.documentElement
&& document
.documentElement
.clientHeight
) {
winHeight
= document
.documentElement
.clientHeight
;
}
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";
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();
}
},
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
>
