javascript - Vuetify - 如何使 v-data-table 的标题动态化
问题描述
假设我有一个动态的对象数组,它看起来像这样:
[{id: 1, item: 'apple', taste:'good', item2: 'papaya', taste2: 'bad'}
{id: 2, item: 'melon', taste: 'bad'},
{id: 3, item: 'orange', taste: 'good', item2: 'banana', taste2: 'bad', item3: 'grape', taste3:'good'} .......]
如何制作 v-data-table 以使标题看起来像这样
ID | ITEM | TASTE | ITEM2 | TASTE2 | ITEM3 | TASTE3 .....
解决方案
该headers
值应该是具有以下代码的计算属性:
computed: {
headers() {
//set having unique values
let s = new Set();
this.items.forEach(item => {
for (f in item) {
//adding an existing value doesn't override the old one
s.add(f)
}
});
//respect the headers format required by Vuetify which
// should has at least two fields (text, value)
return Array.from(s).map(a => {
return {
text: a.toUpperCase(),
value: a
}
});
}
}
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
items: [{
id: 1,
item: 'apple',
taste: 'good',
item2: 'papaya',
taste2: 'bad'
}, {
id: 2,
item: 'melon',
taste: 'bad'
},
{
id: 3,
item: 'orange',
taste: 'good',
item2: 'banana',
taste2: 'bad',
item3: 'grape',
taste3: 'good'
}
]
}
},
computed: {
headers() {
let s = new Set();
this.items.forEach(item => {
for (f in item) {
s.add(f)
}
});
return Array.from(s).map(a => {
return {
text: a.toUpperCase(),
value: a
}
});
}
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-data-table :headers="headers" :items="items"></v-data-table>
</v-container>
</v-content>
</v-app>
</div>
推荐阅读
- c++ - char数组和字符串文字之间的类型有什么区别
- python - Rasa NLU core.py 无类型问题
- python - 如何在 Python 中编写自己的 async/awaitable 协程函数?
- tensorflow - 是否有一些简单的方法可以将图像预处理应用于 tf.data.Dataset?
- css - 悬停在 Internet Explorer 中的禁用选项上不起作用
- ruby-on-rails - Webpacker 找不到应用程序
- oracle - 条件过程 oracle pl/sql
- javascript - 多级行扩展器网格
- c++ - C++ 返回一个 const unsigned char
- javascript - 将多个用户图像上传到 Firestore 集合的最佳方式是什么?使用 Angular/Ionic 4