时间戳

首页 > 解决方案 > 如何使用带有自定义分页和计算数据的 vuetify 数据表

vue.js - 如何使用带有自定义分页和计算数据的 vuetify 数据表

问题描述

嗨，我将在我的项目中使用Vuetify 数据表，但有 2 个问题。首先我有一个状态列，在我的数据中它是从 0 到 5 的数字。但是在表上我想显示相关的文本。例如2意味着success。我怎么能做到这一点，因为 vutify 将整个数据作为items道具。如何将状态代码更改为文本？同样对于分页部分，我有自己的分页逻辑，比如 laravel，我为每个页面发送请求。有什么方法可以将它的分页与我的一起使用，或者我应该隐藏它并为它编写自己的 ui 代码？另外，如果我可以使用它的分页，如何更改分页的文本（Rows per page: 和1-2 of 2 ）？

注意：我在 Nuxt 2.13 和 Vuetify 2.3.9

<template>
  <v-data-table :headers="tblHeader" :items="items" :sort-by="['date',]" :sort-desc="[false, true]" multi-sort class="elevation-1">
    <template v-slot:item.actions="{ item }">
      <v-btn small class="text_main_color theme__btn__p" @click.prevent="moreDetails(item)">{{lang.more_details}}</v-btn>
    </template>
  </v-data-table>
</template>
<script>
  export default {
    props:['items'],
    data () {
      return {
        items: [
          {
            id: 1,
            customerName: 'Moji',
            invoiceNum: "SP-0001",
            invoiceItems: "2",
            date: 1594261254,
            price: 295,
            status: 1 // on browser is should show pending
          },
          {
            id: 1,
            customerName: 'Moji',
            invoiceNum: "SP-0003",
            invoiceItems: "2",
            date: 1594261254,
            price: 295,
            status: 2 // on browser is should show success
          },
          
        ],
      }
    },
    computed:{
      tblHeader(){
        return [
          { text: this.lang.customer_name, align: 'start', value: 'customerName' },
          { text: this.lang.order_datetime, value: 'date' },
          { text: this.lang.num_of_items, value: 'invoiceItems' },
          { text: this.lang.total, value: 'price' },
          { text: this.lang.invoice_number, value: 'invoiceNum' },
          { text: this.lang.status, value: 'status' },
          { text: this.lang.actions, sortable: false },
        ]
      },
      orders(){

      }
    },
    methods:{
      moreDetails(value){
        this.$emit('details',value)
      }
    }
  }
</script>

更新： 我的分页格式是这样的：

{
  items: [
    ... // data from back end
  ],
  pagination:{
    more: true,
    cursor: 21
  }
}

例如，我发送我想要返回的项目数量，from 21, i want 20 items 然后返回给我上面的 json。

标签： vue.jsvuejs2vuetify.jsnuxt.js

解决方案

对于状态文本，您可以在 v-data-table 组件中使用以下插槽元素：

<template v-slot:item.status="{ item }">
  <p>{{ resolveText(item.status) }}</p>
</template>

在方法中你应该声明resolveText函数：

resolveText (status) {
  switch (status) {
    case 0: return 'zero'
    case 1: return 'first'
    default: return 'infinity'
  }
}

关于分页..现在没有想法

推荐阅读