el-table 指定行固定到最底部

866 阅读1分钟

el-table 指定行固定到最底部

处理后效果

cb1deb6070b15b1ab89ea9aef97f7f5.png

最后两行固定到table表格底部

重点配置属性

:row-style="setRowStyle"

详细代码

 <el-table :data="data" :row-style="setRowStyle" ref="tableTotalRef" max-height="600" border size="small">
   <el-table-column label="华东" prop="demand_E" sortable="custom" />
   <el-table-column label="华北" prop="demand_SW" sortable="custom" />
   <el-table-column label="华中" prop="demand_NE" sortable="custom" />
   <el-table-column label="华南" prop="demand_S" sortable="custom" />
   <el-table-column label="西南" prop="demand_M" sortable="custom" />
   <el-table-column label="西北" prop="demand_N" sortable="custom" />
   <el-table-column label="总数" prop="total_demand" sortable="custom" />
 </el-table>
 
    //js部分
     methods: {
        setRowStyle({ row }) {
           //当有 totalDemandText属性时
            return row.totalDemandText ? {
                background: "#f5f9fd", fontWeight: "bold", position: "-webkit-sticky", position: "sticky",
                bottom: row.isFixed ? '40px' : 0
            } : {}
        },
     }