element-plus 表格-定位到指定行

最新推荐文章于 2024-04-26 16:47:03 发布

缘如风

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1.8k

点赞数 1

分类专栏： VueJS 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/chyuanrufeng/article/details/132663139

版权

VueJS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

表格数据量一页占不下的时候，需要定位到指定的行，显示在可视区域中。采用

scrollTo

滚动到一组特定坐标

(options: ScrollToOptions | number, yCoord?: number)

核心代码

/*
 * 滚动到指定行 tableScrollToRow
 tableElement：表格元素  install.refs.[tableRef]
 rowindex：定位到行号
 isprecise：是否精确计算行高，默认是false不计算，只有第一行的行高
*/
function tableScrollToRow(tableElement, rowindex, isprecise = false) {
  const theTableRows = tableElement.$el.querySelectorAll('.el-table__body tbody .el-table__row')
  let scrollTop = 0;
  for (let i = 0; i < theTableRows.length; i++) {
    if (i === rowindex) {
      break
    }
    scrollTop += theTableRows[i].offsetHeight
    if (!isprecise) {
      scrollTop *= (rowindex - 2);
      break;
    }

  }
  tableElement.scrollTo(0, scrollTop)
}

完整代码


<template>
  <h2>表格的滚动条定位</h2>
  <div>
    <el-button type="primary" @click="goTop">gotop</el-button>
    <el-button type="primary" @click="goEnd">goEnd</el-button>
  </div>
  <el-table ref="tableRef" :data="tableData" border style="width: 100%" highlight-current-row height="800">
    <el-table-column type="index" label="序号" width="100" />
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup >
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'

const install = getCurrentInstance();
const tableRef = ref();
const tableData = reactive<any>([])

function goTop() {
  // 滚动到顶部
  tableScrollToRow(install.refs.tableRef, 0);
}

/*
 * 滚动到指定行 tableScrollToRow
 tableElement：表格元素  install.refs.[tableRef]
 rowindex：定位到行号
 isprecise：是否精确计算行高，默认是false不计算，只有第一行的行高
*/
function tableScrollToRow(tableElement, rowindex, isprecise = false) {
  const theTableRows = tableElement.$el.querySelectorAll('.el-table__body tbody .el-table__row')
  let scrollTop = 0;
  for (let i = 0; i < theTableRows.length; i++) {
    if (i === rowindex) {
      break
    }
    scrollTop += theTableRows[i].offsetHeight
    if (!isprecise) {
      scrollTop *= (rowindex - 2);
      break;
    }

  }
  tableElement.scrollTo(0, scrollTop)
}


function goEnd() {
  // 滚动到底部
  tableScrollToRow(install.refs.tableRef, tableData.length);
}

onMounted(() => {

  for (let i = 0; i < 100; i++) {
    let obj = {
      date: '2016-05-01',
      name: 'Tom' + i,
      address: 'No. 189, Grove St, Los Angeles',
    }
    tableData.push(obj);
  }

})

</script> 


<style >
.myClass {
  background-color: rgb(16, 95, 95) !important;
  color: blueviolet;
}
</style>