table表格数据 运用分页功能 案例 vue2

好的，下面是一个使用Vue2实现表格分页功能的例子：

首先，需要安装vue-tables-2插件，可以使用npm进行安装：

npm install vue-tables-2 --save

然后在Vue组件中引入插件并进行配置：

<template>
  <div>
    <v-server-table :columns="columns" :data="tableData" :options="options"></v-server-table>
  </div>
</template>

<script>
import { ServerTable } from 'vue-tables-2';

export default {
  components: {
    ServerTable,
  },

  data() {
    return {
      columns: ['id', 'name', 'age', 'address'],
      tableData: [],
      options: {
        filterable: false,
        sortable: ['id', 'name', 'age', 'address'],
        perPage: 10,
        perPageValues: [10, 25, 50, 100],
        pagination: {
          chunk: 10,
          edge: true,
        },
      },
    };
  },

  methods: {
    fetchData(params) {
      // 通过ajax请求获取数据
      // ...
      // 将获取到的数据赋值给tableData
      this.tableData = responseData;
    },
  },

  created() {
    this.options.requestFunction = this.fetchData;
  },
};
</script>

上面代码中，通过引入vue-tables-2插件，创建了一个ServerTable组件，配置了表格的列和分页等选项。并且通过fetchData方法获取数据，最后将数据赋值给tableData属性。在created()生命周期钩子中，将请求方法赋值给options中的requestFunction属性，用于分页时调用。

最后，在模板中引入ServerTable组件，即可显示带分页功能的表格。