首页 > 其他分享 >vue3+element-Plus表格滚动联动

vue3+element-Plus表格滚动联动

时间:2023-11-17 17:48:30浏览次数:37  
标签:Table0 secondTable firstTable value element Plus scrollLeft vue3 scrollTop

const Table0 = ref()
const Table1 = ref()

function syncScroll() {
  for (let i = 0; i < compareData.compareInfo.length; i++) {
    let firstTable = Table0.value[i].$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
    let secondTable = Table1.value[i].$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
    firstTable.addEventListener('scroll', () => {
      secondTable.scrollLeft = firstTable.scrollLeft
      secondTable.scrollTop = firstTable.scrollTop
      nextTick(() => {
        Table0.value[i].doLayout()
      })
    })
    secondTable.addEventListener('scroll', () => {
      firstTable.scrollLeft = secondTable.scrollLeft
      firstTable.scrollTop = secondTable.scrollTop
      nextTick(() => {
        Table1.value[i].doLayout()
      })
    })
  }
}

element-Plus组件监听滚动与之前element有区别, Table0.value[i].$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0] 获取表格滚动,监听之

标签:Table0,secondTable,firstTable,value,element,Plus,scrollLeft,vue3,scrollTop
From: https://www.cnblogs.com/Console-LIJIE/p/17839336.html

相关文章

  • Vue3 模板引用 ref 的实现原理
    什么是模板引用ref?有时候可以使用 ref attribute为子组件或HTML元素指定引用ID。<template><inputref="input"/></template><script>import{defineComponent,ref}from"vue";exportdefaultdefineComponent({setup(){......
  • Vue3 的 effect、 watch、watchEffect 的实现原理
    所谓watch,就是观测一个响应式数据或者监测一个副作用函数里面的响应式数据,当数据发生变化的时候通知并执行相应的回调函数。Vue3最新的watch实现是通过最底层的响应式类ReactiveEffect的实例化一个reactiveeffect对象来实现的。它的创建过程跟effectAPI的实现类似,所......
  • vue3 使用 store
    在script中使用storehttps://blog.csdn.net/SubStar/article/details/116077737<script>import{getCurrentInstance}from"vue";import{useStore}from"vuex";exportdefault{setup(){//第一种方法:获取路由对象router的方法1constv......
  • mybatisplus关于驼峰命名法与下划线的映射
    今天遇到一个很坑的事情,我在测试之前的案例的时候我有一个字段的名字是typeId,我调试之后发现插入出现了错误。开启sql日志之后我发现mybatisplus自动把我的typeId改成type_id了。无奈之下我只能把数据库、实体类的驼峰命名法改成下划线###SQL:SELECTid,name,description,t......
  • Vue3 Pinia对state的订阅监听($subscribe,$onAction)数据监听
    <template><divclass="main-container":class="{'show-scroll':targetIsVisible}"><div:style="{height:frameHeight+'px'}"class="main-content":class="{'show-......
  • element中select组件加入滚动分页及模糊查询
    element中select组件加入滚动分页及模糊查询1.directive.js-自定义vue指令importVuefrom'vue'exportdefault()=>{Vue.directive('loadMore',{bind(el,binding){//如上图,我通过v-if来控制了两个select框,当没有binding.arg这个参数时,我只能监听到企......
  • element UI (input输入框clearable)不生效问题
    问题:el-input里自带了一个属性clearable,可以清楚输入框内容。但是有的时候清除无效,可能有如下情况:1.clear删除无效,可以绑定clear事件解决,@clear="handleClear";html:<el-form:label-position="labelPosition"label-width="100px":model="form"><el-form-i......
  • vue2和vue3ref的区别(详解)
    Vue2和Vue3中ref的区别如下:在Vue2中,ref主要用于在模板中获取DOM元素或组件实例。而在Vue3中,虽然ref也可以获取DOM元素或组件实例,但更重要的是,它还可以将一个基本类型的变量转换成响应式的数据,无需再通过复杂的步骤来访问响应式数据。另外,Vue3的ref还支持对象属性和数组索引......
  • Vue3实战 - 第一章 node.js/npm安装、配置
    一、node.js 安装(windows)1、下载并安装nodehttps://nodejs.org/en安装到 D:\Java\nodes 路径2、配置环境变量检查是否安装成功3、配置全局包存放目录和缓存目录npmconfigsetprefix"D:\nodejs\node_global"npmconfigsetcache"D:\nodejs\node_cache"4、安......
  • 获取所有指定类名的元素:getElementsByClassName 注意是带s的
    下列不属于javascript中查找元素的方法的是()AgetElementByClassName()BgetElementsByTagName()CgetElementById()DgetElementsByName()正确答案:A选择A错在Elements。因为这个方法可以返回一组节点。A.获取所有指定类名的元素:getElementsByClassNamevarx=documen......