在使用 Element UI 的
el-table组件时，如果你希望在点击一个按钮后增加一条数据并让表格滚动到底部，你可以通过以下步骤来实现：
- 增加数据：首先，将新数据添加到你的数据数组中。
- 滚动到底部：然后，使用 DOM 操作来让表格滚动到底部。
以下是一个完整的示例代码，展示如何实现这一功能：
<template><div><el-button @click="addRow">增加一行</el-button><el-tableref="myTable":data="tableData"style="width: 100%"height="400px"><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></div>
</template><script>
export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'},// 其他数据...]};},methods: {addRow() {// 添加新数据this.tableData.push({date: '2016-05-06', // 你可以根据需要动态生成日期name: '新姓名',address: '新地址'});// 触发表格滚动到底部this.$nextTick(() => {const tableBodyWrapper = this.$refs.myTable.bodyWrapper;tableBodyWrapper.scrollTop = tableBodyWrapper.scrollHeight;});}}
};
</script>
- 滚动到底部：
- 使用
this.$nextTick确保 DOM 更新完成后再执行滚动操作。this.$refs.myTable.bodyWrapper获取表格的 bodyWrapper DOM 元素，它包含了表格内容的滚动区域。- 设置
scrollTop为scrollHeight，这会将滚动区域滚动到底部。this.$nextTick是 Vue 提供的一个方法，用于在下次 DOM 更新循环结束之后执行延迟回调。这对于在数据更新后需要访问更新后的 DOM 场景非常有用。
