首页 > 其他分享 >vue element 表格定位到某行

vue element 表格定位到某行

时间:2023-11-23 11:45:50浏览次数:45  
标签:__ el vue 表格 refName element vmEl table 某行

    /**
     * @description: 通过表格索引 定位表格的位置
     * @param {refName} table的ref值
     * @param {index} table的索引值
     * @return: 
     * @author: hch
     */
    $tableScrollMove(refName,index=0){
      if(!refName || !this.$refs[refName]) return//不存在表格的ref vm 则返回
      let vmEl = this.$refs[refName].$el
      if(!vmEl) return
      //计算滚动条的位置
      const targetTop = vmEl.querySelectorAll('.el-table__body tr')[index].getBoundingClientRect().top
      const containerTop = vmEl.querySelector('.el-table__body').getBoundingClientRect().top
      const scrollParent = vmEl.querySelector('.el-table__body-wrapper')
      scrollParent.scrollTop = targetTop - containerTop
    },

参考:https://blog.csdn.net/qq_39367226/article/details/107451463

标签:__,el,vue,表格,refName,element,vmEl,table,某行
From: https://www.cnblogs.com/zqlym/p/17851213.html

相关文章

  • vue 插槽上绑定得数据
    <templateslot-scope="scope"><el-button@click="handleClick(scope.row)"type="text"size="small">查看</el-button><el-buttontype="text"size="small">编辑<......
  • VUE CORS
    在Vue.js中,前端是在浏览器中运行的,因此CORS(跨域资源共享)问题通常是在后端解决的。Vue.js本身并不提供直接的方法来处理CORS。以下是一些可能的解决方法:1.使用代理VueCLI提供了一个开发服务器配置文件vue.config.js,你可以在这个文件中配置代理。这个代理只在开发环境中......
  • 关于FastAPI与Vue3的通信
    学习一下前后端分离技术,前端采用三大框架之一的Vue.js,后端则采用Python的FastAPI框架。一、前端设计1.建目录mydemo2.在mydemo目录下打开命令行,运行:npminitvue@latest(这里如果cmd卡死了,就ctrl+C结束,再次运行npminitvue@latest)3.工程名设置为 frontend ,其余按默......
  • vue中watch、computed、methods的执行顺序
    一、默认加载情况如果watch不加immediate:true属性(页面初加载的时候,不会执行watch,只有值变化后才执行),则只执行computed(在mounted后执行);如果watch添加immediate:true属性(在beforeCreate后created前执行),则先执行watch、再执行computed;二、触发某一事件后先执行method,再watch,再......
  • Spring+Vue修改功能
    后端数据回显,根据ID回显@GetMapping("/findById/{id}")publicUsersfindById(@PathVariable("id")Integerid){returnusersRepository.findById(id).get();}修改数据,根据回显的数据回显@PutMapping("/update")publicStringupd......
  • vue 下载文件并且重命名
    <el-buttontype="primary"@click="xz(scope.row)"size="small">下载</el-button>methods内定义方法xz(row){this.getBlob(row.value,(blob)=>{this.saveAs(blob,row.title)......
  • vue 导出excel 后端返回blob数据流
    后端返回blob数据流,前端进行下载封装公共ts组件downloadExcel.ts/**createdbyseven.lauon22/11/2023*导出excel*后端返回Blob数据流*url接口地址*paramsData接口参数*filename导出excel的文件名**/importaxiosfrom'axios';constdownloadExcel=func......
  • elementUI中关于 el-table 表尾合计行列子
    列表中数量和金额需要统计并显示单位:统计后的效果如下:    <el-tablev-loading="loading"border:data="List"@selection-change="handleSelectionChange"show-summary:summary-method="getSummaries&quo......
  • vue2在线预览文档——Onlyoffice
    以下三个链接,结合看:Java+vue3:springbootvue初步集成onlyoffice_vue集成onlyoffice_Mr-Wanter的博客-CSDN博客使用docker+vue2:vue2集成Onlyoffice_vue集成onlyoffice-CSDN博客Onlyoffice+vue3官网例子:https://api.onlyoffice.com/editors/vue1.安装依赖安装完依赖就......
  • vue学习笔记(借鉴其他笔记不是本人书写)
    文章目录一.Vue基础认识Vue.jsVue安装方式Vue的MVVM二.Vue基础语法生命周期模板语法创建Vue,options可以放什么语法综合v-onv-for遍历数组v-model表单绑定v-model结合radio类型使用v-model结合checkbox类型使用v-model结合select类型使用值绑......