首页 > 其他分享 >el-table表头动态增加字段,表格滚动条自动滚动到最右侧

el-table表头动态增加字段,表格滚动条自动滚动到最右侧

时间:2023-11-14 11:15:53浏览次数:34  
标签:el 表格 表头 滚动条 tableEl table

  • index.vue
      //内含表格的子组件,
       <editTable
          @changeReload="changeReload"
          :reload="reload"
        ></editTable>
 methods: {
    changeReload() {
      this.reload = Math.random();
    },
  }
  • editTable.vue
<el-table
      :key="reload"
      :data="tableData"
    >
//......表格数据
</el-table>
    this.tableColumns.push({
              //......添加的新的一条数据
            });
           
    this.$emit('changeReload'); // 表格表头增加时,表格重新渲染,这样可以将滚动条滚动到最右侧,nextTick才会是最终起效的
    //滚动到最右侧
    this.$nextTick(() => {
        const tableEl = document.getElementsByClassName(
          'el-table__body-wrapper'
        )[0];
        tableEl.scrollTo(tableEl.scrollWidth, 0);
      });

标签:el,表格,表头,滚动条,tableEl,table
From: https://www.cnblogs.com/sinceForever/p/17831136.html

相关文章

  • [LeetCode] 2785. Sort Vowels in a String
    Givena0-indexedstrings,permutestogetanewstringtsuchthat:Allconsonantsremainintheiroriginalplaces.Moreformally,ifthereisanindexiwith0<=i<s.lengthsuchthats[i]isaconsonant,thent[i]=s[i].Thevowelsmustbes......
  • selenium报错result.webdriverValue.value
    1.示例代码fromseleniumimportwebdriverdriver=webdriver.Chrome()driver.get('http://124.223.30.31:xxx/forum.php')driver.find_element('id','ls_username').send_keys('admin')端口我匿了这个代码是没有问题的,任意其他代码在当前的环境下都是会出现这个错......
  • react| 封装TimeLine组件
    功能支持居中/局左/居右布局可自定义线条颜色默认情况下图标是圆形,可自定义圆形颜色和大小,同时也可以自定义图标支持自定义内容效果constdata=[{"title":"2022-12-0512:03:40","des":"茶陵县实时广播防火宣传"},...]<TimeLineda......
  • electron 打包报错
     下载链接:https://npm.taobao.org/mirrors/electron/ ......
  • 通过PowerShellPlus示例脚本学习PowerShell-读取VMware主机信息
    ##=====================================================================##Title:GetVI-HostList##Description:RetrieveVMwareHosts##Author:Idera##Date:9/11/2008##Input:-VIserver:VirtualInfrastructureserver##......
  • 软件测试|使用selenium实现文件上传
    简介文件上传是我们web自动化测试工作中经常使用的场景,selenium同样也是支持我们实现自动化的文件上传操作,本文就来给大家介绍一下selenium如何实现自动化文件上传。input标签文件上传一般情况下,文件上传的按钮是一个<input>标签,并且附带的type属性为file,这样的标签我们可以使用sen......
  • intel ssd 670P 更新固件的方法
    笔者笔记本感觉莫名其妙的慢,有一块2T的nvme670P的ssd,以前的更新工具INTELTOOLBOX不能更新这个ssd,看了国外的贴子说INTELssd被一个公司收购了,工具也变了,变更后的工具是Solidigm(TM)StorageTool,https://www.solidigm.com/content/solidigm/us/en/support-page/drivers-downl......
  • Python selenium Chrome正在受到自动软件的控制 disable-infobars无效 的解决方法
    问题解决前两天更新了google浏览器版本,今天运行以前的脚本,发现options一个参数的配置不生效了。运行了几次都发现该参数没有生效,也检查了自己的代码参数,没有写错,于是就有了这一波“网中寻求答案”的操作。苦寻不易,还真就找到了答案,详细可参见该地址的答案:https://help.applitoo......
  • python连接数据库导入excel查询结果
    下面是主要代码部分 #安装包pymysql,excel导入模块importpymysql#安装sql连接库模块importpandasaspd#安装excel导入模块#连接数据库conn=pymysql.connect(  host='cs-cn',#连接地址  port=4037,            #连接端口  ......
  • Elasticsearch【正则搜索】分析&实践
    Elasticsearch【正则搜索】分析&实践RegexpQueryregexp允许使用正则表达式进行term查询.注意regexp如果使用不正确,会给服务器带来很严重的性能压力。比如.*开头的查询,将会匹配所有的倒排索引中的关键字,这几乎相当于全表扫描,会很慢。因此如果可以的话,最好在使用正则前,加上匹配的......