如何解决带有自定义组件和帮助程序的 v-data-table 中的动态项目模板插槽
假设我有一个使用 Vuetify 的 v-data-table
的自定义组件。
在此组件中,还有多个其他自定义组件,例如加载器和特定的基于列的组件,用于以某种方式显示数据。
我发现自己在整个项目中使用相同的代码来过滤、检索数据、加载器等 - 所以不是很枯燥。
不同的是:
-
用于检索数据的 API 请求 url(我可以将其传递给这个通用组件)
-
v-data-table
的标头(我传递给这个通用组件) -
特定的物品栏模板! (使用相同代码的文件需要进行如下列修改,有时也需要不同的组件):
<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>
我显然使用了更多独特的“列模板”,这只是一个例子。
-
在计算属性中修改传递给
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 } }) }
-
我可以在某些模板槽项修改上使用一些独特的方法,例如下面的 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>
我总是可以将其设为全局或将它们作为道具提供,因此这一点应该不是什么大问题。
所以我的问题是:
- 在将数组传递到 v-data-table 之前,使用带有
v-data-table
的一个组件但动态传递模板插槽并允许项目修改的最佳方法是什么(根据上面的第 3 点和第 4 点) - 有没有更好的方法来解决这个问题,因为这看起来太复杂了(我应该只保留单独的特定文件)吗?感觉不是很干,这就是为什么我不是很喜欢当前的解决方案。
基本上我会很高兴有这样的东西:
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"
/>
相关但不完全是我的问题的解决方案:
- Is it possible to use dynamic scoped slots to override column values inside <v-data-table>?
- Dynamically building a table using vuetifyJS data table
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。