Vuetify 使用带有 Vuex 的 API 的外部数据的数据表

Posted 2023-02-22

【中文标题】Vuetify 使用带有 Vuex 的 API 的外部数据的数据表

【英文标题】：Vuetify Using datatable with external data from an API with Vuex

【发布时间】：2018-08-11 08:35:59

【问题描述】：

我想将 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' 
    ]
  )

【参考方案1】：

假设这是 Vuetify v1.5，关于数据表的 total-items 属性的文档指出：

注意：将此绑定到空白字符串或 与 搜索会产生意想不到的行为

如果您从表中删除“搜索”道具，记录数将再次显示。如果你还是在做外部的事情，你就不会想要默认的搜索功能。

【参考方案2】：

这是我的工作设置：

<template>
  <v-data-table
      :total-items="pagination.totalItems"
      :pagination.sync="pagination"
      :items="rows"
      :headers="columns">
      <template slot="headers" slot-scope="props">
        <tr :active="props.selected">
          <th v-for="column in props.headers">
             column.value 
          </th>
        </tr>
      </template>

    <template slot="items" slot-scope="props">
        <tr>
          <td v-for="cell in props.item.row">
            <v-edit-dialog lazy>
               cell.value 
              <v-text-field
                :value="cell.value"
                single-line
                counter>
              </v-text-field>
            </v-edit-dialog>
          </td>
        </tr>
      </template>
  </v-data-table>
</template>

<script>
export default 
  data: () => (
    pagination: 
      page: 1,
      rowsPerPage: 10,
      totalItems: 0
    ,

    selected: []
  ),

  computed: 
    columns: 
      get () 
        return this.$store.state.columns
      
    ,

    rows: 
      get () 
        return this.$store.state.rows
      
    
  ,

  methods: 
    async getRowsHandler () 
      try 
        const total = await this.$store.dispatch('getRows', 
          tableIdentifier: this.$route.params.tableIdentifier,
          page: this.pagination.page,
          size: this.pagination.rowsPerPage
        )

        this.pagination.totalItems = total
       catch (error) 
        // Error
      
    
  

</script>

我没有实现所有东西。如果您错过了特定部分，请再次询问，我将更新我的示例。另一个提示：您应该尽可能避免使用watch deep。这可能会导致繁重的计算。

【讨论】：

props.selected 是什么？是否必须在商店中定义？

@BillalBegueradj 你问得很好，因为它丢失了。 selected 数组包含此表的所有选定行。 props.selected 只是在选中一行时添加了漂亮的背景效果。

你说得对，我昨晚就是这么总结的，非常感谢你分享的信息。最好的问候