element-plus表格上下键滚动

最新推荐文章于 2025-03-13 14:59:12 发布

过景不候

最新推荐文章于 2025-03-13 14:59:12 发布

阅读量465

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/D030923/article/details/132812675

版权

文章介绍了在Vue应用中使用ElementUI的el-table组件展示数据，包括如何实现行级别的删除操作以及响应键盘事件（如上下箭头）自动滚动到选中行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <el-table
      ref="singleTableRef"
      width="200px"
      :data="tableData"
      highlight-current-row
      height="500"
    >
      <el-table-column label="姓名" prop="name"></el-table-column>
      <!-- 其他列定义 -->
      <el-table-column>
        <template #scope>
          <el-table-column label="操作">
            <el-button @click="deleteRow(scope.$index)">删除</el-button>
          </el-table-column>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'xiaodong1' },
        { name: 'xiaodong2' },
        { name: 'xiaodong3' },
        { name: 'xiaodong4' },
        { name: 'xiaodong5' },
        { name: 'xiaodong6' },
        { name: 'xiaodong7' },
        { name: 'xiaodong8' },
        { name: 'xiaodong9' },
        { name: 'xiaodong10' },
        { name: 'xiaodong11' },
        { name: 'xiaodong12' },
        { name: 'xiaodong13' },
        { name: 'xiaodong14' },
        { name: 'xiaodong15' },
        { name: 'xiaodong16' },
        { name: 'xiaodong17' },
        { name: 'xiaodong18' },
        { name: 'xiaodong19' },
        { name: 'xiaodong20' },
        { name: 'xiaodong21' },
        { name: 'xiaodong22' },
        { name: 'xiaodong23' },
      ], // 表格数据
      selectedRowIndex: 0, // 当前选中行索引
    }
  },
  mounted() {
    document.addEventListener('keydown', this.handleKeyDown)
    this.$refs.singleTableRef.setCurrentRow(this.tableData[0])
  },
  methods: {
    handleKeyDown(event) {
      // 更新选中行索引
      if (event.key === 'ArrowUp') {
        // 向上箭头键，选中上一行
        if (this.selectedRowIndex > 0) {
          this.selectedRowIndex--
        } else {
          this.selectedRowIndex = this.tableData.length - 1
        }
        // // 滚动到选中行
        const rowElement = document.querySelector(
          `.el-table__row:nth-child(${this.selectedRowIndex + 1})`,
        )
        this.$refs.singleTableRef.setCurrentRow(this.tableData[this.selectedRowIndex])

        rowElement.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'smooth' })
      } else if (event.key === 'ArrowDown') {
        // 向下箭头键，选中下一行
        if (this.selectedRowIndex < this.tableData.length - 1) {
          this.selectedRowIndex++
        } else {
          this.selectedRowIndex = 0
        }
        // // 滚动到选中行
        const rowElement = document.querySelector(
          `.el-table__row:nth-child(${this.selectedRowIndex + 1})`,
        )
        this.$refs.singleTableRef.setCurrentRow(this.tableData[this.selectedRowIndex])
        rowElement.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'smooth' })
      }
    },
  },
}
</script>
<style lang="scss">

</style>