实现el-table 点击按钮 增加一条数据 让表格滚动到最底部

在使用 Element UI 的 el-table 组件时,如果你希望在点击一个按钮后增加一条数据并让表格滚动到底部,你可以通过以下步骤来实现:

  1. 增加数据:首先,将新数据添加到你的数据数组中。
  2. 滚动到底部:然后,使用 DOM 操作来让表格滚动到底部。

以下是一个完整的示例代码,展示如何实现这一功能:

javascript 复制代码
<template>
  <div>
    <el-button @click="addRow">增加一行</el-button>
    <el-table
      ref="myTable"
      :data="tableData"
      style="width: 100%"
      height="400px"
    >
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        // 其他数据...
      ]
    };
  },
  methods: {
    addRow() {
      // 添加新数据
      this.tableData.push({
        date: '2016-05-06', // 你可以根据需要动态生成日期
        name: '新姓名',
        address: '新地址'
      });

      // 触发表格滚动到底部
      this.$nextTick(() => {
        const tableBodyWrapper = this.$refs.myTable.bodyWrapper;
        tableBodyWrapper.scrollTop = tableBodyWrapper.scrollHeight;
      });
    }
  }
};
</script>
  1. 滚动到底部
    • 使用 this.$nextTick 确保 DOM 更新完成后再执行滚动操作。
    • this.$refs.myTable.bodyWrapper 获取表格的 bodyWrapper DOM 元素,它包含了表格内容的滚动区域。
    • 设置 scrollTopscrollHeight,这会将滚动区域滚动到底部。
    • this.$nextTick 是 Vue 提供的一个方法,用于在下次 DOM 更新循环结束之后执行延迟回调。这对于在数据更新后需要访问更新后的 DOM 场景非常有用。
相关推荐
小桥风满袖16 小时前
极简三分钟ES6 - ES8中字符串扩展
前端·javascript
张拭心16 小时前
这就是流量的力量吗?用豆包 AI 编程做的xhs小组件帖子爆了
前端·ai编程·豆包marscode
少年阿闯~~16 小时前
CSS3的新特性
前端·javascript·css3
IT_陈寒16 小时前
React性能优化:这5个Hook技巧让我的组件渲染效率提升50%(附代码对比)
前端·人工智能·后端
智能化咨询17 小时前
【Linux】【实战向】Linux 进程替换避坑指南:从理解 bash 阻塞等待,到亲手实现能执行 ls/cd 的 Shell
前端·chrome
Anson Jiang17 小时前
浏览器标签页管理:使用chrome.tabs API实现新建、切换、抓取内容——Chrome插件开发从入门到精通系列教程06
开发语言·前端·javascript·chrome·ecmascript·chrome devtools·chrome插件
掘金安东尼17 小时前
黑客劫持:周下载量超20+亿的NPM包被攻击
前端·javascript·面试
剑亦未配妥18 小时前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师1 天前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js