vue table直接定位到指定元素的操作代码

 更新时间:2022年11月24日 11:41:06   作者:_houjie  
最近遇到这样的需求点击某一个节点,弹窗,直接定位到点击的节点,高亮并显示数据,下面小编给大家带来了vue table直接定位到指定元素的操作代码,需要的朋友可以参考下

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'
      })
    }
  }
},
 

到此这篇关于vue table直接定位到指定元素的文章就介绍到这了,更多相关vue定位指定元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue版日历组件的实现方法

    vue版日历组件的实现方法

    这篇文章主要为大家详细介绍了vue版日历组件的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue2.0移动端滑动事件vue-touch的实例代码

    vue2.0移动端滑动事件vue-touch的实例代码

    这篇文章主要介绍了vue2.0移动端滑动事件vue-touch的实例代码,需要的朋友可以参考下
    2018-11-11
  • vue中对监听esc事件和退出全屏问题的解决方案

    vue中对监听esc事件和退出全屏问题的解决方案

    这篇文章主要介绍了vue中对监听esc事件和退出全屏问题的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • VUE 使用中踩过的坑

    VUE 使用中踩过的坑

    本篇是我对vue使用过程中以及对一些社区朋友提问我的问题中做的一些总结,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-02-02
  • vue使用富文本编辑器vue-quill-editor的操作指南和注意事项

    vue使用富文本编辑器vue-quill-editor的操作指南和注意事项

    vue中很多项目都需要用到富文本编辑器,在使用了ueditor和tinymce后,发现并不理想,所以果断使用vue-quill-editor来实现,下面这篇文章主要给大家介绍了关于vue使用富文本编辑器vue-quill-editor的操作指南和注意事项,需要的朋友可以参考下
    2023-05-05
  • Vue实现选择城市功能

    Vue实现选择城市功能

    这篇文章主要介绍了Vue实现选择城市功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-05-05
  • vue在.js文件中如何进行路由跳转

    vue在.js文件中如何进行路由跳转

    这篇文章主要介绍了vue在.js文件中如何进行路由跳转,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 详解vue.js的事件处理器v-on:click

    详解vue.js的事件处理器v-on:click

    本篇文章主要介绍了详解vue.js的事件处理器v-on:click,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • idea部署RuoYi-Vue分离版的图文详解

    idea部署RuoYi-Vue分离版的图文详解

    RuoYi-Vue是一款基于SpringBoot+Vue的前后端分离极速后台开发框架, 本文主要介绍了idea部署RuoYi-Vue分离版的图文详解,具有一定的参考价值,感兴趣的可以了解一下
    2024-06-06
  • vue3网络请求添加loading过程

    vue3网络请求添加loading过程

    这篇文章主要介绍了vue3网络请求添加loading过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08

最新评论