当结果少于 10 页时，vue 数据表服务器端搜索下一个按钮被禁用

Question

我使用 Vue 数据表（v-data-table）实现了服务器端搜索和分页。当我开始在搜索栏中输入内容时，首先只输入“n”，它会返回 55 页，这是正确的，我可以使用下一页/上一页按钮浏览页面。但是，当搜索为“ni”并且仅返回 25 个项目（正确计算后，这应该是 3 页）时，我的下一个按钮被禁用......见下文。有人知道哪里出了问题吗？我还附上了从数据表模板开始的代码...

          <v-data-table
              :headers="headers"
              :items="all_items"
              :search="search"
              height="300px"
              :server-items-length="totalPages"
              fixed-header
              :items-per-page="10"
              :page="page"
              :options.sync="options"
              @update:options="onOptionsChanged"
          ></v-data-table>
        </v-card>
      </v-container>
    </template>

    <script>
    import axios from "axios";
    
    export default {
      name: "datatable",
      mounted() {
        axios.get('http://localhost:8080/api/fields?model_id=1').then(response => this.headers = response.data.results)
        axios.get('http://localhost:8080/api/freemodelitems?model_id=1').then(response => {
          this.totalPages = response.data.count > 10 ? Math.ceil(response.data.count / 10) : 1
          this.page = this.options.page
          for (let i = 0; i < response.data.results.length; i++) {
            this.all_items.push(response.data.results[i].data)
          }
        })
      },
      watch: {
        search: function (val) {
          this.search = val
          this.onOptionsChanged(this.options, true)
          return val
        }
      },
      methods: {
        onOptionsChanged(options, page0=false) {
          console.log(page0)
          axios.get('http://localhost:8080/api/freemodelitems?model_id=1' +
              '&page=' +
              (!page0 ? this.options.page : 1) +
              '&search=' +
              this.search).then(response => {
            this.page = !page0 ? this.options.page : 1
            this.totalPages = response.data.count > 10 ? Math.ceil(response.data.count / 10) : 1
            console.log(this.totalPages)
            console.log(this.page)
            this.all_items = [];
            for (let i = 0; i < response.data.results.length; i++) {
              this.all_items.push(response.data.results[i].data)
            }
          })
    
        },
      },
      data() {
        return {
          search: "",
          options: {},
          headers: [],
          all_items: [],
          pageSize: 10,
          totalPages: 0,
          page: 1,
        }
      },
    }
    </script>

Answer 1

问题是

:server-items-length="totalPages"

。您正在使用总页数设置属性，但您需要将其设置为项目总数或将其全部删除，因为组件可以自行计算页数。

引自 prop

server-items-length

的文档：

仅当数据由服务器提供时使用。应设置为服务器上可用项目的总数，以便分页正常工作

Answer 2

使用此数据表

https://www.npmjs.com/package/data-table-vue-v3

它具有许多高级功能并且完全免费！

兼容 vue 2 和 vue 3。