javascript - Vuetify 数据表通用组件
问题描述
<template>
<v-data-table
:headers="this.headers"
:items="this.items"
hide-actions
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
</v-data-table>
</template>
<script>
export default {
data () {
return {
items: [],
headers: [],
attributes: []
}
},
methods: {
loadItems (items) {
items.forEach(item => {
var counter = 0
var obj = `{\n`
attributes.forEach(attribute => {
obj += '"' + attribute + '" : ' + item[counter]
if (counter < attributes.lenght)
obj += ',\n'
else
obj += '\n'
counter++;
})
obj += '}'
this.items.push(obj)
})
},
loadHeaders (headers) {
headers.forEach(header => {
this.headers.push({ text: header, value: header.toLowerCase()})
this.attributes.push(headers)
})
},
loadTable (items, headers) {
this.loadHeaders(headers)
this.loadItems(items)
}
}
}
</script>
<style scoped>
</style>
这些函数是否可以动态构建带有自定义项目和标题的数据表?我想构建一个数据表组件,该组件对于我的 SQLlite3 数据库中的每个数据表都是通用的。如何更改模板以显示属性数组中项目的自定义属性?
解决方案
推荐阅读
- r - 转换 Python 列表并将其存储在 R 环境中。所以我可以使用 rpy2.objects.r() 访问列表
- elasticsearch - 具有过滤器匹配的 Elasticsearch 聚合
- video-streaming - 视频流在几秒钟后冻结,但声音正常
- sql - 包括存在数据的指标,但不包括在结果中
- amazon-web-services - Packer 可以在本地构建 AMI(即,不连接到 AWS)吗?
- python - 舍入包含数字和字符串的数据框中的所有数字?
- javascript - Nuxtjs toastr 和数据表插件在 adminLTE - 3 模板中不起作用
- c# - 如何使用 C# 将不同方法的结果加载到变量中
- apache-spark - 在 Kubernetes 上运行 Spark 时,是否可以作为另一个用户以 root 身份运行?
- java - 休眠:无法确定类型:> java.util.List