Question

我正在学习使用此框架（Vuejs），我需要找到一种在表中添加页面的方法，通过这种方法，应该在添加更多对象时对其进行扩展，然后在表中列出它们并限制按标签显示的项目数。

使用的表如下。

  <table class="table table-responsive">
      <thead>
        <tr>
          <th>Título</th>
          <th>Tipo</th>
          <th>Categoría</th>
          <th>Fecha creación</th>
          <th>Acción</th>
        </tr>
      </thead>
      <tbody>
        <tr :key="post.IDEN_PUBLICACION" v-for="post in posts" v-if="!post.FLAG_VALIDADO && !post.FLAG_BAN">
          <td>{{post.NOMB_PUBLICACION}}</td>
          <td>{{post.CODI_TIPO_PUBLICACION == 'P' ? 'Producto' : 'Servicio' }}</td>
          <td>{{post.categoria.NOMB_CATEGORIA}}</td>
          <td>{{post.FECH_CREACION | dateFormat}}</td>
          <td>
            <a class="btn btn-success" @click="acceptPost(post)" title="Aceptar"><icon name="check"></icon></a>
            <a class="btn btn-danger" @click="ban(post)" title="Rechazar"><icon name="times"></icon></a>
          </td>
        </tr>
      </tbody>
    </table>

搜索时，我发现有一些插件可以提供帮助，但是如果我设法以可视方式实现它，我不知道如何开始开发所需的行为。

我尝试使用“ vue-paginate”。

 <!--Paginación de tabla -->
      <template>
        <paginate
          :page-count="5"
          :page-range="1"
          :margin-pages="1"
          :click-handler="recorrerTabla"
          :prev-text="'Anterior'"
          :next-text="'Siguiente'"
          :container-class="'pagination'"
          :page-class="'page-item'">
        </paginate>
      </template>

此方法仅用于检查功能

methods: {
acceptPost (post) {
  controller.acceptPost(this, post)
},
recorrerTabla: function (pageNum) {
  console.log(pageNum)
},

n摘要，我希望该表在该表的每个选项卡中显示5个项目，并且寻呼机允许我在另一个选项卡中查看以下5个项目。如果可以的话，再加上页数适合项目总数，那就太好了。

视图中的图像

使用的技术：

Vuejs 2.4节点8+ Nuxt 1.0.0-RC11 Nuxt / Axios 4.5.0 JWT解码2.2.0 Js-Cookie Vee-Validate

在此先感谢您的回答以及任何文档或帮助示例。

如何在Vuejs中合并页面分页？

0 个答案: