vue table直接定位到指定元素的操作代码
作者:_houjie 发布时间:2024-05-09 15:14:57
标签:vue,定位,指定元素
vue+element中的表格,直接定位到指定的元素。
需求:点击某一个节点,弹窗,直接定位到点击的节点,高亮并显示数据。
<el-table ref="highTable" :data="treeData" highlight-current-row border default-expand-all row-key="'id" :tree-props="{children:'children',hasChildren:'hasChildren'}" :row-style="rowClassRender" :row-class-name="tableRowClassName">
...
</el-table>
treeData是我的树状数据,表格树。
default-expand-all:是否默认展开所有行,当 Table 包含展开行存在或者为树形表格时有效;
row-style:行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style; //高亮显示
row-class-name:行的 className 的回调方法,也可以使用字符串为所有行设置一个固定的 className。 //获取index(我用的是树状数据,如果是列表数据就不需要)
rowClassRender({
row
}) {
if (row.id === this.currentItemId) {
return {
'background-color': 'red'
}
} else {
return ''
}
},
tableRowClassName({
row,
index
}) {
//this.nodeItem是我最开始点击的节点
if (row.id === this.nodeItem.id) {
this.currentIndex = index;
}
}
注意:一定要在获取数据之后去赋值!!!不然scrollTop一直为0!!!!!
在获取列表的代码块中:
let divT = this.$refs.hightTable;
this.$nextTick(()=>{
divT.scrollTop = 36 * this.currentIndex
})
vue中table表格做定位处理
需求:前端根据搜索条件中的partNo的值,进行定位查询到table列表中对应的每一行
search(){
if(this.positionIndx.length==0){
this.tableData.forEach((item,index)=>{
if(item.partNo == this.queryForm.partNo){
this.positionIndx.push(index) // 定义一个空数组 positionIndx 用来保存相同partNo的下标;
}
})
}
if (this.tableData.length > 0) {
if (this.queryForm.partNo !== '') {
if (this.$refs['selectPartRefs']) {
let vmEl = this.$refs['selectPartRefs'].$el // selectPartRefs 是table中绑定的ref的值,一定要保持一致;
//计算滚动条的位置
const targetTop = vmEl.querySelectorAll('.el-table__body tr')[this.positionIndx[this.inPosition]].getBoundingClientRect().top // 找到table中的每一行利用下标来计算每一行dom元素的上部与浏览器的可视窗口的上面的高度距离;
const containerTop = vmEl.querySelector('.el-table__body').getBoundingClientRect().top
const scrollParent = vmEl.querySelector('.el-table__body-wrapper')
scrollParent.scrollTop = targetTop - containerTop;
this.inPosition++; // 首先在data中定义 inPosition = 0 ,每次点击search按钮的时候,让下标进行++操作,以遍定位到下一个匹配的partNO;
if( this.inPosition >= this.positionIndx.length ){
this.inPosition = 0; // 所有的都遍历完成以后,让定位回到第一个匹配的partNo的行上,以此达到可以循环定位的效果;
}
}
} else {
this.$message({
type: 'error',
message:'Please enter the partNo of the query'
})
}
}
},
来源:https://www.cnblogs.com/houBlogs/p/16921224.html
0
投稿
猜你喜欢
- 1、官网下载地址在官网找到你想安装的版本 官网地址:https://www.python.org/并且选择下载windows版本目前最新的版
- format()函数"""测试 format()函数"""def t
- 一、背景交通大数据是由交通运行管理直接产生的数据(包括各类道路交通、公共交通、对外交通的刷卡、线圈、卡口、GPS、视频、图片等数据)、交通相
- sql代码如下:CREATE PROCEDURE Proname //使用CREATE PROCED
- 微软开源了一个非常强大的自动化项目叫 playwright-python它支持主流的浏览器,包含:Chrome、Firefox、Safari
- requests 提供了一个叫做session类,来实现客户端和服务端的会话保持使用方法1.实例化一个session对象2.让session
- PyTorch加载模型model.load_state_dict()问题希望将训练好的模型加载到新的网络上。如上面题目所描述的,PyTorc
- 前言本文提供获取视频时长的python代码,精确到毫秒,一如既往的实用主义。环境依赖 ffmpeg环境安装,可以参考:window
- Pytorch:dtype不一致RuntimeError: Expected object of scalar type Double bu
- sorted 用于对集合进行排序(这里集合是对可迭代对象的一个统称,他们可以是列表、字典、set、甚至是字符串),它的功能非常强大1、对列表
- 目录前言QueryCache介绍QueryCache配置QueryCache使用禁用queryCache场景开启queryCache场景查询
- 前言:本篇主要讲两方面,错误和异常以及模块。在编程时遇见错误信息在所难免,Python中会也有很多种错误信息,常见的两种就是语法错误和逻辑错
- 你的SQL Server最近是否运行不正常?不,我指的不是我们肯定会遇到的通常的数据库和操作系统问题。我的意思是,你是否经历过服务器的反应迟
- 写了个JavaScript版的DateAdd、DateDiff、IsDate函数,大家评评!需要说明的是,JavaScript中IsDate
- todo list无闪烁更新网页的课题比较大。加载的html字符串(通过ajax获取的),如果还需要运行代码,那么肯定有问题。希望用一个不显
- 问题:pycharm无法调用pip安装的包原因:pycharm没有设置解析器解决方法:打开pycharm->File->Sett
- 第一步 关闭代码拼写检查setting–>Inspections–>Spelling–>Typo,取消勾选:第二步 关闭代
- url标记为变量通过把 URL 的一部分标记为 <variable_name> 就可以在 URL 中添加变量。标记的 部分会作为
- PDO::lastInsertIdPDO::lastInsertId — 返回最后插入行的ID或序列值(PHP 5 >= 5.1.0,
- 还是决定冠上ajax的头衔,毕竟很多人会用这个关键词搜索。虽然我认为这只是个炒作的概念,不过不得不承认ajax叫起来要方便多了。ajax的意