element-plus 表格-定位到指定行
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
表格数据量一页占不下的时候,需要定位到指定的行,显示在可视区域中。采用
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>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 6 个月前
更多推荐
已为社区贡献7条内容
所有评论(0)