Question

我想将vuetify框架与Vuex一起使用，但有关将其与Vuex一起使用的文档有限。

我想：

从外部API获取数据（但仅包含所需数据）
然后将数据保存在状态和编辑或其他
然后将任何更改推回到api

我已经尝试了一些带有vuetify的外部分页和排序示例，但除非我对其进行硬编码，否则我无法显示所有记录计数。

我对Vue和Vuetify很新，所以也许我误解了一些事情。

<template>
<div>
    <v-data-table
            :headers='headers'
            :items='items'
            :length='pages'
            :search='search'
            :pagination.sync='pagination'
            :total-items='totalItemCount'
            class='elevation-1'
    >
        <template slot='items' slot-scope='props'>
            <td class='text-xs-right'>{{ props.item.id }}</td>
            <td class='text-xs-right'>{{ props.item.first_name }}</td>
            <td class='text-xs-right'>{{ props.item.last_name }}</td>
            <td class='text-xs-right'>{{ props.item.avatar }}</td>
        </template>
    </v-data-table>
</div>
</template>
<script>
import moment from 'moment'
import axios from 'axios'

export default {
  name: 'test-table',
  watch: {
    pagination: {
      async handler () {
        const rowsPerPage = this.pagination.rowsPerPage
        // const skip = (this.pagination.page - 1) * rowsPerPage
        const pageNumber = this.pagination.page
        const res = await axios.get(`https://reqres.in/api/users?page=${pageNumber}&per_page=${rowsPerPage}`)
        this.items = res.data.data
        this.$store.commit('saveTableData', this.items)
      },
      deep: true
    }
  },
  computed: {
    pages () {
      return 171
    },
    totalItemCount () {
      return 400
    }
  },
  async mounted () {
    const rowsPerPage = this.pagination.rowsPerPage
    const skip = (this.pagination.page - 1) * rowsPerPage
    const res = await axios.get(`https://reqres.in/api/users?page=${skip}&per_page=${rowsPerPage}`)
    this.items = res.data.data
    this.$store.commit('saveTableData', this.items)
  },
  methods: {
    nzDate: function (dt) {
      return moment(dt).format('DD/MM/YYYY')
    }
  },
  data: () => ({
    search: '',
    // totalItems: 0,
    items: [],
    pagination: {
      sortBy: 'Date'
    },
    headers: [
      { text: 'ID', value: 'id' },
      { text: 'First Name', value: 'first_name' },
      { text: 'Last Name', value: 'last_name' },
      { text: 'Avatar', value: 'avatar' }
    ]
  })
}

Answer 1

假设这是Vuetify v1.5，则有关数据表的total-items属性的文档说明：

警告：将其绑定到空白字符串或结合使用搜索会产生意外的行为

如果从表中删除“搜索”道具，则记录计数将再次显示。无论如何，如果您正在做外部工作，则将不需要默认的搜索功能。

Vuetify将数据表与来自带有Vuex的API的外部数据一起使用

1 个答案: