基于Vue3和Bootstrap-Vue-3实现b-table可排序及功能咨询

我正尝试为b-table添加排序功能，但遇到了问题。当前使用的版本为：Vue ^3.2.13，BootstrapVue-3 ^0.1.6，不清楚问题出在哪里。同时想咨询该组件是否支持筛选和分页功能，以下是我的Vue代码：

<template>
  <div class="overview">
    <b-table
        sort-by="status" sortDesc
        :items="items"
        :fields="formFields.licences"
    >
    </b-table>
  </div>
</template>

<script>

export default {
  name: "licences.vue",
  data(){
    return {
      formFields: {
        licences: [
          {key: "name", sortable: true,  label: "Name"},
          {key: "status", sortable: true, label: "Status"},
        ],
      },
      items: [
        { name: "Jack", status: "Used" },
        {name: "Frank", status: "Unused"},
        {name: "Larry", status: "Used" }
      ]
      }
  }
}
</script>

排序问题排查 #

• 你使用的BootstrapVue-3 ^0.1.6是极早期的测试版本，很多功能不完善，大概率是版本bug导致排序失效。建议直接升级到最新稳定版，解决基础功能问题。
• 模板中属性写法有误：sortDesc应该改为绑定的:sort-desc="true"（Vue模板中驼峰属性要转成短横线分隔的绑定形式），sort-by也建议改为绑定形式:sort-by="'status'"，修正后代码：

<b-table
    :sort-by="'status'" 
    :sort-desc="true"
    :items="items"
    :fields="formFields.licences"
>
</b-table>

筛选与分页支持 #

BootstrapVue 3的b-table完全支持筛选和分页：

筛选实现 #

添加输入框绑定筛选关键词，配合b-table的filter属性：

<input v-model="filterText" placeholder="输入关键词筛选">
<b-table
    :filter="filterText"
    :items="items"
    :fields="formFields.licences"
>
</b-table>

在data中新增filterText: ''即可。

分页实现 #

用b-pagination组件配合b-table的分页属性：

<b-table
    :items="items"
    :fields="formFields.licences"
    :per-page="perPage"
    :current-page="currentPage"
>
</b-table>
<b-pagination
    v-model="currentPage"
    :total-rows="items.length"
    :per-page="perPage"
    aria-controls="licence-table"
>
</b-pagination>

在data中新增perPage: 2, currentPage: 1。

内容的提问来源于stack exchange，提问作者mlvt