Bootstrap Vue perPage 用于自定义列或行

Question

我有一个简单的 vue 项目codesandbox with bootstrap-vue。

有几列带有卡片和这些列的分页：

<template>

  <b-container>
    <b-row 
      :current-page="currentPage"
      :per-page="perPage">   

      <b-col cols="12" sm="4" class="my-1"
        v-for="item in items" 
          :key="item.id">

        <b-card           
          :bg-variant="item.variant"
          text-variant="white"
          header="item.title"
          class="text-center"
          >
          <p class="card-text">
            {{item.body}}
          </p>
        </b-card>  

      </b-col>

    </b-row>

    <b-row>
      <b-col md="6" class="my-1">
        <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
      </b-col>
    </b-row>
  </b-container>

</template>

所以我正在尝试为列实现一个工作分页，类似于 bootstrap table.

的分页

页面应显示 2 列，卡片 = perPage: 2。

问题：如何为自定义列或行设置 bootstrap-vue perPage？

Answer 1

如果你想每页获得 2 张卡片，我建议你使用计算属性 solution，我创建了一个我称之为 currentPageItems

computed: {
   ...
   
   currentPageItems() {
          let lengthAll =this.items.length;
      this.nbPages = 0;
        for (let i = 0; i < lengthAll; i = i + this.perPage) {
        this.paginated_items[this.nbPages] = this.items.slice(
          i,
          i + this.perPage
        );
        this.nbPages++;
      }
       
        return this.paginated_items[this.currentPage-1];
  
    }
    
    ...
  }

我在 data() 中添加了这些属性：

paginated_items: {},
currentPageIndex:0,
nbPages:0

在模板部分将 items 更改为 currentPageItems

...
 <b-col cols="12" sm="4" class="my-1" v-for="item in currentPageItems" :key="item.id">
...

完整的代码片段：

<template>

  <b-container>
    <b-row>   
    
      <b-col cols="12" sm="4" class="my-1"
        :key="index"
        v-for="(item, index) in currentPageItems" 
          >
        <b-card         
          :bg-variant="item.variant"
          text-variant="white"
          :header="item.title"
          class="text-center"
          >
          <p class="card-text">
            {{item.body}}
          </p>
        </b-card>  

      </b-col>

    </b-row>

    <b-row>
      <b-col md="6" class="my-1">
        <b-pagination :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
      </b-col>
    </b-row>
  </b-container>

</template>

<script>
const items = [
  {
    title: "Primary",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "primary"
  },
  {
    title: "Secondary",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "secondary"
  },
  {
    title: "Success",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "success"
  },
  {
    title: "Info",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "info"
  },
  {
    title: "Warning",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "warning"
  },
  {
    title: "Danger",
    body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    variant: "danger"
  }
];

export default {
  name: "MyBootstrapGrid",
  data() {
    return {
      items: items,
      currentPage: 1,
      perPage: 2,
      totalRows: items.length,
      paginated_items: {},
      currentPageIndex:0,
      nbPages:0
    };
  },
  computed: {
    pageCount() {
      let l = this.totalRows,
        s = this.perPage;
      return Math.floor(l / s);
    },
      currentPageItems() {
          let lengthAll =this.items.length;
      this.nbPages = 0;
        for (let i = 0; i < lengthAll; i = i + this.perPage) {
        this.paginated_items[this.nbPages] = this.items.slice(
          i,
          i + this.perPage
        );
        this.nbPages++;
      }
       
        return this.paginated_items[this.currentPage-1];
  
    }
  },
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

Answer 2

如果我对你的理解正确的话，剩下你要做的就是对项目进行分页。这是一个工作 Sandbox 我添加了 paginatedItems 数据和 paginate 和 onPageChange方法。

Bootstrap Vue perPage 用于自定义列或行

Bootstrap Vue perPage for custom columns or rows

javascript

vue.js

vue-component

vuejs2

bootstrap-vue