实现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 场景非常有用。
相关推荐
mCell17 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip17 小时前
Node.js 子进程:child_process
前端·javascript
excel20 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel21 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript