当前位置：首页 > VUE

vue实现表格追加

2026-03-08 08:51:40VUE

实现表格追加的方法

在Vue中实现表格数据追加，通常涉及动态更新数据源并利用响应式特性自动渲染。以下是几种常见实现方式：

基于数组操作的追加

通过v-for渲染表格数据，利用数组方法（如push、concat）更新数据：

<template>
  <table>
    <tr v-for="(item, index) in tableData" :key="index">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </table>
  <button @click="loadMore">加载更多</button>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 }
      ]
    }
  },
  methods: {
    loadMore() {
      const newData = [
        { name: 'Charlie', age: 28 },
        { name: 'David', age: 22 }
      ]
      this.tableData = this.tableData.concat(newData)
    }
  }
}
</script>

分页加载实现

结合分页参数从API获取新数据：

methods: {
  async loadMore() {
    const res = await axios.get('/api/data', {
      params: { page: this.currentPage + 1 }
    })
    this.tableData.push(...res.data)
    this.currentPage++
  }
}

使用无限滚动插件

通过vue-infinite-scroll等插件实现滚动加载：

安装插件：
```
npm install vue-infinite-scroll
```

实现代码：

vue实现表格追加


<template>
<div v-infinite-scroll="loadMore" infinite-scroll-distance="100">
 <table><!-- 表格内容 --></table>
</div>
</template>

import infiniteScroll from 'vue-infinite-scroll' export default { directives: { infiniteScroll }, methods: { loadMore() { // 加载逻辑 } } } ```

性能优化建议

为列表项设置唯一的:key
大数据量时考虑虚拟滚动（如vue-virtual-scroller）
分块加载避免主线程阻塞

// 分块加载示例
async loadChunk() {
  for (let i = 0; i < 5; i++) {
    await this.loadSingleItem()
    await new Promise(resolve => setTimeout(resolve, 0))
  }
}

根据具体场景选择合适方法，简单数据追加使用数组操作即可，复杂场景建议结合分页或无限滚动方案。