实现el-table 点击按钮 增加一条数据 让表格滚动到最底部

在使用 Element UI 的 el-table 组件时，如果你希望在点击一个按钮后增加一条数据并让表格滚动到底部，你可以通过以下步骤来实现：

1. 增加数据：首先，将新数据添加到你的数据数组中。
2. 滚动到底部：然后，使用 DOM 操作来让表格滚动到底部。

以下是一个完整的示例代码，展示如何实现这一功能：

<template>
  <div>
    <el-button @click="addRow">增加一行</el-button>
    <el-table
      ref="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>

1. 滚动到底部 ：
   • 使用 this.$nextTick 确保 DOM 更新完成后再执行滚动操作。
   • this.$refs.myTable.bodyWrapper 获取表格的 bodyWrapper DOM 元素，它包含了表格内容的滚动区域。
   • 设置 scrollTop 为 scrollHeight，这会将滚动区域滚动到底部。
   • this.$nextTick 是 Vue 提供的一个方法，用于在下次 DOM 更新循环结束之后执行延迟回调。这对于在数据更新后需要访问更新后的 DOM 场景非常有用。