a-table（Ant Design Vue） 滚动到指定行位置

在使用 a-table 组件时，如果你想滚动到指定的行位置，可以通过访问内部的表格元素并调整其 scrollTop 属性来实现。以下是一个基于 Vue 和 Ant Design Vue 的例子，演示如何滚动到指定行位置：

<template>
  <a-table :columns="columns" :dataSource="data" :scroll="{ y: 300 }"
    @scroll="handleScroll"
    ref="tableRef"
  >
  </a-table>
</template>
 
<script>
export default {
  data() {
    return {
      columns: [
        // ...定义你的列
      ],
      data: [
        // ...定义你的数据
      ],
      rowKey: 'key', // 假设每行数据都有一个唯一的 'key' 字段
    };
  },
  methods: {
    scrollToRow(rowKey) {
      const row = this.data.find(row => row[this.rowKey] === rowKey);
      if (row) {
        const tableBody = this.$refs.tableRef.$el.querySelector('.ant-table-body');
        if (tableBody) {
          const rowElement = tableBody.querySelector(`[data-row-key="${row[this.rowKey]}"]`);
          if (rowElement) {
            const tableBodyScrollTop = rowElement.offsetTop - tableBody.offsetTop;
            tableBody.scrollTop = tableBodyScrollTop;
          }
        }
      }
    },
    handleScroll() {
      // 你可以在这里处理滚动事件，如果需要
    }
  },
  mounted() {
    // 假设你想滚动到 'rowKey' 为 '123' 的行
    this.scrollToRow('123');
  }
};
</script>

总结：

在这个例子中，我们定义了一个 scrollToRow 方法，它接受一个 rowKey 参数，用于查找对应的行并滚动到该行的位置。在 mounted 钩子中调用此方法时，可以滚动到指定的行。请注意，这个例子假设每行数据都有一个唯一的 rowKey 字段，并且你已经在 data 数组中定义了这个字段。此外，a-table 组件的 ref 设置为 "tableRef"，这是在模板中引用表格元素所必需的。