el-table如何在每页10条变为每页50条之后下面的分页框和表头相对距离不变

您可以通过以下步骤来实现el-table在每页10条变为每页50条之后下面的分页框和表头相对距离不变：

1. 在el-table组件中添加一个ref属性，例如：

<el-table :data="tableData" :height="tableHeight" ref="myTable">

2. 在需要控制样式的地方添加一个class属性，例如：

<el-pagination class="my-pagination" ...>

3. 在样式表中为这个class添加样式，例如：

.my-pagination {
margin-top: 10px; /* 上边距为10像素 */
}

4. 在el-table组件中添加一个监听函数，监听分页事件，例如：

<el-table :data="tableData" :height="tableHeight" ref="myTable" @current-change="handlePageChange">

5. 在Vue实例中定义这个监听函数，例如：

methods: {
handlePageChange() {
this.$nextTick(() => {
const tableEl = this.$refs.myTable.$el.querySelector('.el-table__body-wrapper');
const paginationEl = document.querySelector('.my-pagination');
const margin = paginationEl.offsetTop - tableEl.offsetHeight - tableEl.offsetTop;
if (margin > 0) {
tableEl.style.marginBottom = margin + 'px';
} else {
tableEl.style.marginBottom = '0';
}
});
}
}

这个函数会在分页事件触发时调用，首先使用$nextTick方法确保所有DOM元素都已经渲染完成，然后获取el-table__body-wrapper元素和.el-pagination元素，计算它们之间的距离，如果距离为正数，则将el-table__body-wrapper元素的下边距设为这个距离，否则下边距为0。

这样就实现了el-table在每页10条变为每页50条之后下面的分页框和表头相对距离不变的效果。