vue3 el-table先滚动到末尾再添加数据

在 Vue3 中，当你需要在一个 `el-table` 组件中动态加载数据并使其自动滚动到底部时，可以利用 `v-if` 和 `ref` 结合使用。首先，确保你有一个表格的滚动区域引用，比如：

<template>
  <div ref="tableWrapper">
    <el-table :data="tableData" v-if="tableData.length > 0"></el-table>
  </div>
</template>

然后，在组件的 data 部分初始化一个空数组，并在你需要添加数据的地方，设置 `tableData`，同时更新表单：

export default {
  data() {
    return {
      tableData: [], // 初始化为空数组
      newItems: [], // 存储新数据
      loaded: false, // 表示是否已经完成加载
    };
  },
  methods: {
    fetchData() {
      // 加载新的数据
      this.newItems = ...; // 这里填充实际的新数据

      // 更新数据并且延迟一段时间让滚动生效
      Promise.all([this.$nextTick(), this.$refs.tableWrapper.scrollToBottom()]).then(() => {
        this.tableData.push(...this.newItems);
        this.loaded = true;
      });
    },
  },
};

最后，在适当的时候调用 `fetchData()` 方法：

// 比如在按钮点击事件中调用
methods: {
  handleAdd() {
    this.fetchData();
  },
},

当新的数据加载完成后，`scrollToBottom()` 方法会将滚动条自动滚动到底部，然后再将新数据合并到列表中。