element-ui中表格只有固定表頭以及列的方法，找遍了文檔也沒有固定行的方法。
于是自己些了樣式。
首先需要用到css中的屬性position: sticky；參考我另一篇關(guān)于css實(shí)現(xiàn)吸頂吸底的文章。
<el-table :data="tableData" style="width: 100%;" height="79%" stripe
:row-class-name="rowClass"
class="tableStyle tableRadius mt10">
<template v-for="(item,i) in tableHeader">
<el-table-column :key="i" :label="item.label" :prop="item.prop" show-overflow-tooltip></el-table-column>
</template>
</el-table>設(shè)置表格高度后，給需要吸底的行設(shè)置定位，我這里固定的是合計(jì)行，設(shè)置了class。
需要注意：如果 tr 不設(shè)置 display:inline-block ，將不能實(shí)現(xiàn)吸底。
另外td需要設(shè)置邊框，吸底后td會(huì)沒有邊框，整體的行會(huì)比前面未固定的行短，正好是每個(gè)td的1px邊框。
rowClass({row, column, rowIndex, columnIndex}){
if(row.startTime == '合計(jì)：') {
return 'fixed-row'
}
}.tableStyle {
.el-table__body {
// 吸底
.fixed-row{
display: inline-block;
position: sticky;
bottom: 0;
width: 100%;
td{
border: 1px solid #fff;
box-shadow: 2px -2px 3px 0px #ddd;
}
}
}效果如下：
?
文章來源：http://www.zghlxwxcb.cn/news/detail-531154.html
tips：如果設(shè)置吸底行的樣式只會(huì)對(duì)行內(nèi)第一個(gè)td生效，所以如果有需要可以設(shè)置所有td的樣式。我設(shè)置的陰影就是設(shè)置了td的陰影文章來源地址http://www.zghlxwxcb.cn/news/detail-531154.html
到了這里，關(guān)于element-ui 表格吸底固定最后一行的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
