Vue3+Element Plus，用el-table实现滚动并高亮特定行

在vue3中，当我们使用Element Plus中的el-table表格组件进行开发，想要实现点击或者某个操作后，表格中特定行的数据高亮并自动滚动到当前高亮行。

实现效果：

template代码

<template>
  <el-button type="primary" style="margin-bottom: 20px;" @click="scrollTo">滚动到Tom9并高亮</el-button>

  <el-table ref="tableEl" 
    :data="tableData" 
    border  
    style="width: 100%" 
    height="300px" 
    highlight-current-row
    :row-style="{ height: '40px' }">
    <el-table-column prop="date" label="Date" width="180" align="center" />
    <el-table-column prop="name" label="Name" width="180" align="center" />
    <el-table-column prop="address" label="Address" align="center" />
  </el-table>
</template>

关键代码：highlight-current-row
开启是否要高亮当前行，默认是关闭

关键代码：height=“300px”
给表格设置高度，让它带有滚动条

关键代码：:row-style=“{ height: ‘40px’ }”
给每一行的表格设置高度，默认40px，经过我测试继续减小不会发生变化，最小就是40px。这里给了每一行高度是后续为了移动更好的定位。

script代码

<script setup lang="ts">
import { ref, nextTick } from 'vue'
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom1',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom2',
    address: 'No. 189, Grove St, Los Angeles',
  },
  // 此处省略Tom3 ~ Tom14代码，自行补充即可......
  {
    date: '2016-05-01',
    name: 'Tom15',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom16',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
const tableEl = ref()

/** 设置高亮并滚动至当前行 */
const scrollTo = () => {
  const row = tableData.value.find(item => item.name === 'Tom9')
  const index = tableData.value.findIndex(item => item.name === 'Tom9')
  // 设置高亮
  tableEl.value.setCurrentRow(row)
  // 滚动至当前行
  nextTick(() => {
    tableEl.value.setScrollTop(40 * index)
  })
}
</script>

关键地方：
setCurrentRow：用于单选表格，设定某一行为选中行， 如果调用时不加参数，则会取消目前高亮行的选中状态。方法接受的是需要高亮行的数据对象
setScrollTop：设置垂直滚动位置。方法接受的是一个数字，即需要移动的高度。

这里使用了Element表格组件自带的API，利用上诉给表格每一行设定了40px高度，这里就只需查找到需要滚动到特定行的数组下标，两者相乘就可以得到想要移动的高度。

注意：setScrollTop方法必须在nextTick里面调用，否则可能会不生效

完整代码

<script setup lang="ts">
import { ref, nextTick } from 'vue'
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom1',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom2',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom3',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom4',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom5',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom6',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom7',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom8',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom9',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom10',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom11',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom12',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom13',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom14',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom15',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom16',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
const tableEl = ref()

/** 设置高亮并滚动至当前行 */
const scrollTo = () => {
  const row = tableData.value.find(item => item.name === 'Tom9')
  const index = tableData.value.findIndex(item => item.name === 'Tom9')
  // 设置高亮
  tableEl.value.setCurrentRow(row)
  // 滚动至当前行
  nextTick(() => {
    tableEl.value.setScrollTop(40 * index)
  })
}
</script>

<template>
  <el-button type="primary" style="margin-bottom: 20px;" @click="scrollTo">滚动到Tom9并高亮</el-button>

  <el-table ref="tableEl" 
    :data="tableData" 
    border  
    style="width: 100%" 
    height="300px" 
    highlight-current-row
    :row-style="{ height: '40px' }">
    <el-table-column prop="date" label="Date" width="180" align="center" />
    <el-table-column prop="name" label="Name" width="180" align="center" />
    <el-table-column prop="address" label="Address" align="center" />
  </el-table>
</template>