element-ui table 设置表格滚动条位置

作者：System 时间：2024年08月28日分类：所有,elementui 字数：1248

这篇文章距离上次修改已过245天，其中的内容可能已经有所变动。

在Element UI的Table组件中，如果你想要设置滚动条的位置，可以使用scrollTop属性。你需要将表格的ref属性设置为一个引用名称，然后通过这个引用调用表格的scrollTo方法来设置滚动位置。

以下是一个简单的例子：

<template>
  <el-table
    :data="tableData"
    ref="myTable"
    height="200"
    style="overflow: auto;">
    <!-- 列配置 -->
  </el-table>
  <el-button @click="scrollToRow(5)">Scroll to Row 5</el-button>
</template>

<script>
  export default {
    data() {
      return {
        tableData: Array(100).fill(null).map((_, index) => ({
          id: index,
          name: `Row ${index}`
        }))
      };
    },
    methods: {
      scrollToRow(rowIndex) {
        const row = this.tableData[rowIndex];
        if (row) {
          const table = this.$refs.myTable;
          table.scrollTo(row);
        }
      }
    }
  };
</script>

在这个例子中，我们有一个包含100行的虚拟数据的表格，并且有一个按钮来调用scrollToRow方法。这个方法将会计算目标行的位置并滚动到它。注意，Element UI的表格需要一个固定的高度（例如通过height属性）才能正确地工作。

如果你想要滚动到特定的像素位置，可以使用scrollTop属性：

scrollToPosition(position) {
  const tableBodyWrapper = this.$refs.myTable.$el.querySelector('.el-table__body-wrapper');
  if (tableBodyWrapper) {
    tableBodyWrapper.scrollTop = position;
  }
}

在这个例子中，我们直接操作了表格的滚动容器（.el-table__body-wrapper）的scrollTop属性来设置特定的位置。

element-ui table 设置表格滚动条位置

评论已关闭

推荐阅读