Bootstrap Vue perPage 用于自定义列或行

Question

我有一个简单的 vue 项目 codesandbox 和 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

如果我对您的理解正确，那么您要做的实际上就是对项目进行分页。 这是一个工作Sandbox 我添加了 paginatedItems 数据和 paginate 和 onPageChange 方法。

Answer 2

如果您想每页获得 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">
...

完整代码sn-p：

<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>