el-table表头动态增加字段,表格滚动条自动滚动到最右侧
  ltsplqN9LP9z 2023年11月30日 19 0
  • 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);
      });



【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月30日 0

暂无评论

推荐阅读
ltsplqN9LP9z