是的，可以在Vue 和使用Vuetify 中实现这一点。您只需要使用计算属性来转换标题和实际行。
如果您查看 vuetify 的数据表文档，它会将标头作为 text、value 对的数组。所以这意味着，我们需要以 vuetify 可以理解的方式转换我们的数据。
首先，只需将记录分配给数据部分中名为日志的变量。
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
logs: []
};
},
在mounted或created hooks中，我们可以通过一些可能来自API请求的实际数据来初始化数据。
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
logs: []
};
},
computed: {
//will see how to implement this
},
methods: {
getLogs() {
return [
{
employee_id: "E0001",
dtr: [
{
type: "timein",
time: "8:00 am"
},
{
type: "timeout",
time: "5:00 pm"
},
{
type: "timein",
time: "8:30 pm"
},
{
type: "timeout",
time: "8:45 pm"
},
{
type: "timein",
time: "10:45 pm"
}
]
},
{
employee_id: "E0002",
dtr: [
{
type: "timein",
time: "8:00 am"
},
{
type: "timeout",
time: "5:00 pm"
}
]
},
{
employee_id: "E0003",
dtr: [
{
type: "timeout",
time: "5:00 pm"
},
{
type: "timein",
time: "8:00 am"
}
]
}
];
},
initLogs() {
this.logs = this.getLogs();
}
},
created() {
//init log can be use fetch data API with a little bit of change
this.initLogs();
}
});
现在最重要的部分是计算属性，它将构造数据表所需的实际数据。我们需要一个用于 headers 和 items 的计算属性。
这是返回 employee_id 和 timein 和 timeout 标题行的 logHeader 计算属性。
logHeaders() {
// tranforms the logs to find out which is the longest row
let logRecords = this.logs.map((log) => {
let dtrTypes = [];
log.dtr.forEach((d) => dtrTypes.push(d.type));
return {
employee_id: log.employee_id,
dtrLength: log.dtr.length,
dtrTypes: dtrTypes
};
});
let records = _.sortBy(logRecords, ["dtrLength"]);
// find the longest record
let longestRecord = records[records.length - 1];
let headers = [];
console.log("records: ", records[records.length - 1]);
//construct the header row
headers.push({
text: "employee_id",
value: "employee_id"
});
// inside object we can only store unique keys!!
//index plays a crucial role in this as it changes
// timein to be timein1. timein2 so on
longestRecord.dtrTypes.forEach((type, index) =>
headers.push({ text: type, value: type + "" + index })
);
console.log("headers", headers);
return headers;
},
这会给我们一个对象数组，如下所示
[
{ name: 'employee_id', value: 'employee_id' },
{ name: 'timein', value: 'timein' },
{ name: 'timeout', value: 'timeout' }
]
注意：由于对象不能有重复的键，如果有另一个 timein 条目这会产生问题，所以我们只需要为标题值添加索引，以便我们可以添加更多 timein 或 timeout具有不同的值，例如 timin1 或 timeout1。
所以上面的函数使用索引来添加相同的键文本但具有不同的值。
[
{ name: "employee_id", value: "employee_id" },
{ name: "timein", value: "timein0" },
{ name: "timeout", value: "timeout1" },
{ name: "timein", value: "timein2" } // here
];
最后，logRows 计算属性将 logs 数组转换为我们的数据表所需的数据类型。
logRows() {
let logR = this.logs.map((log) => {
let dtrRecord = {};
// construct the rows accroding to headers
log.dtr.forEach(
// index is also crucial here
(d, index) => (dtrRecord[d.type + "" + index] = d.time)
);
return Object.assign(
{},
{ employee_id: log.employee_id, ...dtrRecord }
);
});
return logR;
}
在视图中，我们只需要使用这个headers 和rows 作为数据表的输入。
<div>
<v-data-table :headers="logHeaders" :items="logRows"></v-data-table>
</div>
如果你把所有的点点滴滴连接在一起，它看起来像下面这样。
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
logs: []
};
},
computed: {
logHeaders() {
// tranforms the logs to find out which is the longest
// row
let logRecords = this.logs.map((log) => {
let dtrTypes = [];
log.dtr.forEach((d) => dtrTypes.push(d.type));
return {
employee_id: log.employee_id,
dtrLength: log.dtr.length,
dtrTypes: dtrTypes
};
});
let records = _.sortBy(logRecords, ["dtrLength"]);
// find the longest record
let longestRecord = records[records.length - 1];
let headers = [];
console.log("records: ", records[records.length - 1]);
//construct the header row
headers.push({
text: "employee_id",
value: "employee_id"
});
// inside object we can only store unique keys!!
//index plays a crucial role in this as it changes
// timein to be timein1. timein2 so on
longestRecord.dtrTypes.forEach((type, index) =>
headers.push({ text: type, value: type + "" + index })
);
console.log("headers", headers);
return headers;
},
logRows() {
let logR = this.logs.map((log) => {
let dtrRecord = {};
// construct the row accroding to headers
// checkour
log.dtr.forEach(
(d, index) => (dtrRecord[d.type + "" + index] = d.time)
);
return Object.assign(
{},
{ employee_id: log.employee_id, ...dtrRecord }
);
});
return logR;
}
},
methods: {
getLogs() {
return [
{
employee_id: "E0001",
dtr: [
{
type: "timein",
time: "8:00 am"
},
{
type: "timeout",
time: "5:00 pm"
},
{
type: "timein",
time: "8:30 pm"
},
{
type: "timeout",
time: "8:45 pm"
},
{
type: "timein",
time: "10:45 pm"
}
]
},
{
employee_id: "E0002",
dtr: [
{
type: "timein",
time: "8:00 am"
},
{
type: "timeout",
time: "5:00 pm"
}
]
},
{
employee_id: "E0003",
dtr: [
{
type: "timein",
time: "8:00 am"
},
{
type: "timeout",
time: "5:00 pm"
}
]
}
];
},
initLogs() {
this.logs = this.getLogs();
}
},
created() {
this.initLogs();
}
});
这是一个有效的codepen，可以看到这个实现的实际效果。