Vuetify动态数据表组件

Question

我对Vue开发很陌生，并且使用Vuetify v-data-table创建了一个动态列表组件。在此组件中，我收到一个配置对象作为道具，并获取标头，重定向链接以及其他一些东西的配置。

现在，我遇到了一个问题：我无法格式化单元格的内容，因为我无法使用常规的v-slot:item.<property>方法来应用过滤器。有什么方法可以接收过滤器的指针并将其应用于指定列的每个值？

谢谢。

编辑：

Component =>

<template>
  <div class="container">
    <v-app>
      <v-data-table :headers="config.cabecalho" :items="data" sort-by="id" class="elevation-1">
        <template v-slot:top>
          <v-toolbar flat color="white">
            <v-toolbar-title>{{ config.titulo }}</v-toolbar-title>
            <v-divider class="mx-4" inset vertical></v-divider>
            <div class="flex-grow-1"></div>
            <v-dialog v-model="dialog" max-width="500px">
              <template v-slot:activator="{ on }">
                <v-btn color="primary" dark class="mb-2" @click="novoItem">Novo</v-btn>
              </template>
            </v-dialog>
          </v-toolbar>
        </template>        
        <template v-slot:item.acoes="{ item }">
          <v-icon small class="mr-2" @click="editItem(item)">edit</v-icon>
          <v-icon small @click="deleteItem(item)">delete</v-icon>
        </template>
      </v-data-table>
    </v-app>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'
export default {
  data: () => ({
    dialog: false,
    data: []
  }),
  props: {
    config:{
      type: Object
    }
  },
  methods:{
    editItem(item) {
    return this.$router.push(this.config.linkEdit + item.id)
  },

    deleteItem(item) {
      const index = this.data.indexOf(item)
      confirm("Tem certeza que quer excluir o item?") &&
        axios.get(this.config.linkDelete)
          .then(res => { 
            if (res.status == '200') {
              alert('Item excluído com sucesso.')
            }
            else {
              alert('Falha ao excluir item, tente novamente.')
            }
          })
          .catch( e => console.log(e))
    },

    novoItem () {
      this.$router.push(this.config.linkNovo)
    }
  },

  async mounted() {
    await setTimeout(() => {
      this.data = [
        { id: 1, numero: '1', entidade:'Cliente Um', dtIni: '2019-06-01', dtFim: '2020-06-02', vlrTotal: 3500.00, diaVenc: '5' },
        { id: 2, numero: '2', entidade:'Cliente Dois', dtIni: '2019-07-01', dtFim: '2020-07-02', vlrTotal: 7000.00, diaVenc: '15' },
        { id: 3, numero: '3', entidade:'Cliente Três', dtIni: '2019-08-01', dtFim: '2020-08-02', vlrTotal: 1200.00, diaVenc: '10' },
        { id: 4, numero: '4', entidade:'Cliente Quatro', dtIni: '2019-09-01', dtFim: '2020-09-02', vlrTotal: 800.00, diaVenc: '25' },
        { id: 5, numero: '5', entidade:'Cliente Cinco', dtIni: '2019-09-10', dtFim: '2020-09-11', vlrTotal: 25000.00, diaVenc: '5' }
      ]
    }, 100)
  },
}
</script>

调用通过config prop =>

的组件的页面

template>
  <div class="container">
    <lista-base :config="this.config"></lista-base>
  </div>
</template>

<script>
import ListaBase from '~/components/padrao/ListaBase.vue'

export default {
  data(){
    return {
      config: {
        linkBusca: '',
        linkNovo: '/contrato/create',
        linkEdit: '',
        linkDelete: '',
        titulo: 'Cadastro de Contratos',
        cabecalho: [
          {
            text: "#",
            align: "right",
            value: "id"
          },
          { 
            text: "Entidade", 
            value: "entidade",
            align: "left"
          },
          {
            text: "Início", 
            value: "dtIni",
            align: "center"
          },
          { 
            text: "Fim", 
            value: "dtFim",
            align: "center"
          },
          { 
            text: "Valor Total (R$)", 
            value: "vlrTotal",
            align: "right",
            filtro: "formataNumero"
          },
          { 
            text: "Ações", 
            value: "acoes", 
            sortable: false,
            align: "center"
          }
        ],
      }
    }
  },
  components: {
    ListaBase
  },
}
</script>

我使用了虚拟数据对象，因为它仍然是一个实验项目。