vue2 长table

在 Vue2 中，你可以使用 `v-for` 指令和计算属性来渲染长表格。

首先，你需要定义一个包含表格数据的数组。在这个数组中，每个元素都代表一行数据。然后在模板中，你可以使用 `v-for` 指令来遍历数组，并渲染每一行数据。

下面是一个简单的例子：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="person in persons" :key="person.id">
      <td>{{ person.name }}</td>
      <td>{{ person.age }}</td>
      <td>{{ person.gender }}</td>
    </tr>
  </tbody>
</table>

在上面的例子中，我们使用了 `v-for` 指令来遍历 `persons` 数组，并渲染了每一行数据。注意到我们还使用了 `:key` 属性来指定一个唯一的键，以便 Vue 能够正确地跟踪每个元素。

如果你的表格数据比较大，你可能需要考虑分页来提高性能。这时，你可以使用计算属性来动态地渲染每一页的数据，而不是一次性渲染所有数据。

下面是一个使用分页的例子：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="person in filteredPersons" :key="person.id">
      <td>{{ person.name }}</td>
      <td>{{ person.age }}</td>
      <td>{{ person.gender }}</td>
    </tr>
  </tbody>
</table>
<div>
  <button @click="prevPage">上一页</button>
  <span>{{ currentPage + 1 }} / {{ pageCount }}</span>
  <button @click="nextPage">下一页</button>
</div>

export default {
  data() {
    return {
      persons: [...], // 表格数据
      pageSize: 10, // 每页显示的数据条数
      currentPage: 0 // 当前页码
    }
  },
  computed: {
    pageCount() {
      // 分页总数
      return Math.ceil(this.persons.length / this.pageSize)
    },
    filteredPersons() {
      // 动态计算当前页的数据
      const start = this.currentPage * this.pageSize
      const end = start + this.pageSize
      return this.persons.slice(start, end)
    }
  },
  methods: {
    prevPage() {
      // 切换到上一页
      if (this.currentPage > 0) {
        this.currentPage--
      }
    },
    nextPage() {
      // 切换到下一页
      if (this.currentPage < this.pageCount - 1) {
        this.currentPage++
      }
    }
  }
}

在上面的例子中，我们使用了一个名为 `filteredPersons` 的计算属性来动态计算当前页的数据。我们还定义了两个方法 `prevPage` 和 `nextPage` 来实现切换页码的功能。最后，我们在模板中添加了两个按钮，用于切换页码。

总的来说，使用 `v-for` 指令和计算属性来渲染长表格是非常简单的。如果你的表格数据比较大，你可以使用分页来提高性能。