ElementUI: 如何使table表格下的组件固定在一个位置,而不会随着数据添加或删除而移动位置。

比如当设置的表格分页为5条一页时,我想让表格下的按钮固定显示在第5条数据的下面,就像这样:

img

而不会在删除数据时往上移动:

img

以下是没有修改时的部分代码:

<el-table
  ref="multipleTable"
  :data="users.slice((currentPage-1)*pageSize,currentPage*pageSize)"
  tooltip-effect="dark"        
  style="width: 100%;">

  <el-table-column
    prop="id"
    label="编号"
    width="120">
  </el-table-column>
</el-table>

<div style="margin-top: 20px" >
  <el-row>
  <el-col :span="2"><div><el-button>取消选择</el-button></div></el-col>
  <el-col :span="13"><div><el-button type="primary" >添加</el-button></div></el-col>
  <el-col :span="2"><div><el-pagination></el-pagination></div></el-col>
  </el-row>
</div>

如果可以的话该怎么修改代码。

<el-table :height="200"

设置个表格固定高度 或者你自适应获取一下屏幕宽度自己适应改一下

那删除的时候不要对users这个数组做处理就可以了

如果是固定跟着分页大小的话很简单了
在你的sizechange的回调里面或者用计算属性也行,size*每行高度。每次切换都会重新计算

根据当前页展示的数据条数去计算表格的高度,
如果每一行的高度是固定的: height=行数*每行高度
如果每一行的高度不是固定的:
获取所有行的dom,遍历每一行,获取每行高度累加起来 就是你表格的高度。