vue实现表格追加

实现表格数据追加的方法

在Vue中实现表格数据追加可以通过多种方式完成，主要涉及数据绑定和数组操作。以下是几种常见的方法：

数据绑定与v-for指令

通过v-for指令渲染表格数据，利用数组的concat或push方法追加新数据。

<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: 20 },
        { name: 'Bob', age: 22 }
      ]
    }
  },
  methods: {
    loadMore() {
      const newData = [
        { name: 'Charlie', age: 25 },
        { name: 'David', age: 28 }
      ]
      this.tableData = this.tableData.concat(newData)
    }
  }
}
</script>

使用分页加载

结合分页参数实现表格数据的追加加载，适合大数据量场景。

methods: {
  async loadMore() {
    const page = this.currentPage + 1
    const res = await api.getData({ page })
    this.tableData.push(...res.data)
    this.currentPage = page
  }
}

滚动加载实现

监听滚动事件，当滚动到底部时自动追加数据。

mounted() {
  window.addEventListener('scroll', this.handleScroll)
},
methods: {
  handleScroll() {
    const scrollHeight = document.documentElement.scrollHeight
    const scrollTop = document.documentElement.scrollTop
    const clientHeight = document.documentElement.clientHeight

    if (scrollTop + clientHeight >= scrollHeight - 10) {
      this.loadMore()
    }
  }
}

性能优化建议

对于大型数据集，建议使用虚拟滚动技术避免DOM节点过多导致的性能问题。可以使用第三方库如vue-virtual-scroller实现高效渲染。

import { RecycleScroller } from 'vue-virtual-scroller'
export default {
  components: { RecycleScroller }
}

注意事项

确保为每行数据设置唯一的key值，通常使用数据ID而非数组索引。避免直接修改props中的表格数据，应该通过事件通知父组件更新。分页加载时注意处理无更多数据的情况，可以显示"没有更多数据"提示。