带有自定义组件和帮助程序的 v-data-table 中的动态项目模板插槽

编程问答 2022-04-23

问题描述

假设我有一个使用 Vuetify 的 v-data-table 的自定义组件。

在此组件中，还有多个其他自定义组件，例如加载器和特定的基于列的组件，用于以某种方式显示数据。

我发现自己在整个项目中使用相同的代码来过滤、检索数据、加载器等 - 所以不是很枯燥。

不同的是：

  1. 用于检索数据的 API 请求 url（我可以将其传递给这个通用组件）

  2. v-data-table 的标头（我传递给这个通用组件）

  3. 特定的物品栏模板！ （使用相同代码的文件需要进行如下列修改，有时也需要不同的组件）：

      <template v-slot:[`item.FullName`]="{ item }">
    <router-link class="black--text text-decoration-none" :to="'/users/' + item.Id">
     <Avatar :string="item.FullName" />
    </router-link>
  </template>

    另一个例子：

      <template v-slot:[`item.serial`]="{ item }">
    <copy-label :text="item.serial" />
  </template>

    我显然使用了更多独特的“列模板”，这只是一个例子。

  4. 在计算属性中修改传递给 v-data-table 的项目（在显示之前添加“操作”或运行清理和/或修改内容 - 与实际的 HTML 输出无关，而是值本身）> 

      computed: {
    items () {
      if (!this.data || !this.data.Values) {
        return []
      }

     return this.data.Values.map((item) => {
       return {
         device: this.$getItemName(item),serial: item.SerialNumber,hwVersion: this.$getItemHwVersion(item),swVersion: this.$getItemSwVersion(item),actions: [
          { to: '/devices/' + item.Id,text: this.$t('common.open') },{ to: '/devices/' + item.Id + '/replace',text: this.$t('common.replace') }
   ],...item
      }
   })
}

  5. 我可以在某些模板槽项修改上使用一些独特的方法，例如下面的 dateMoreThan24HoursAgo()：

      <template v-slot:[`item.LastLogin`]="{ item }">
     <span v-if="dateMoreThan24HoursAgo(item.LastLogin)">{{ item.LastLogin | formatDate }}</span>
     <span v-else>
       {{ item.LastLogin | formatDateAgo }}
     </span>
   </template>

    我总是可以将其设为全局或将它们作为道具提供，因此这一点应该不是什么大问题。

所以我的问题是：

  1. 在将数组传递到 v-data-table 之前，使用带有 v-data-table 的一个组件但动态传递模板插槽并允许项目修改的最佳方法是什么（根据上面的第 3 点和第 4 点）
  2. 有没有更好的方法来解决这个问题，因为这看起来太复杂了（我应该只保留单独的特定文件）吗？感觉不是很干，这就是为什么我不是很喜欢当前的解决方案。

基本上我会很高兴有这样的东西：

data: () => {
    return {
      apiPath: 'devices',headers: [
        { text: 'Device',align: 'start',value: 'device',sortable: false,class: 'text-none' },{ text: 'Serial Number',value: 'serial',{ text: 'Status',value: 'Status',{ text: 'Calibration',value: 'NextCalibrationDate',{ text: '',align: 'right',value: 'actions' }
      ],itemsModify: (items) => {
         return items.map((item) => {
           return {
             device: this.$getItemName(item),actions: [
              { to: '/devices/' + item.Id,text: this.$t('common.replace') }
              ],...item
          }
        })
      },columnTemplatesPath: '/path/to/vue/file/with/templates' 
    }
  }

然后我会像这样调用我的动态组件：

<GenericTable 
  :api-path="apiPath" 
  :headers="headers" 
  :items-modify="itemsModify" 
  :column-templates-path="columnTemplatesPath" 
/>

相关但不完全是我的问题的解决方案：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

datatabledatatablev-data-tablevue.jsvuetify.js