這種方式整個table都會跟着移動,包括標題:
<template>
<el-scrollbar
wrapClass="scrollbar-wrap"
:style="{height: scrollHeight}"
ref="scrollbarContainer">
<div>........</div>
</el-scrollbar>
</template>
<script>
data () {
return {
scrollHeight:'0px'
}
}
mounted(){
this.scrollHeight = window.innerHeight*0.7 + 'px';
}
</script>
<style>
.el-scrollbar{
height: 90%;
.scrollbar-wrap{
overflow-x: hidden;
}
.el-scrollbar__bar{
}
}
</style>
我才用的這種方式:
只要在el-table元素中定義了height屬性,即可實現固定表頭的表格,而不需要額外的代碼。
參考官網:https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes
<template>
<el-table
:data="tableData"
height="250"
border
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄'
}]
}
}
}
</script>