所以我们有一个任务和回复系统,我需要在 Web 应用程序中呈现它。我们的开发团队使用 vuetify.js,但如果我想做的话,我在当前的存储库中没有找到任何示例。
我基本上需要构建一个包含任务详细信息(例如主题、日期、分配给等)的表格,然后在每个任务行下方显示所有回复,这些回复将具有不同的标题集。我想从 SQL 的 Angular 来看,这将是按父任务分组的回复。我发现的最接近的是 Grouped Rows ,但这似乎仅按单个字段进行分组。我需要主表和子表之间有两个不同的标题,但我还没有找到任何示例。
我猜的一个例子是这样的:
ID Subject Assigned To Date Status
123 Need to do something John B 2020-02-01 Active
Mike R User request was submitted 2020-02-01
John B Called User 2020-02-01
Mary Q User called back with details 2020-02-02
John B Waiting on pc support to fix 2020-02-03
223 Need to do something else Jason Q 2020-02-04 Closed
Tom E User Email - Password Reset 2020-02-04
Jason Q Called user and reset password 2020-02-04
诚然,我对 Javascript 和使用 vue 或 vuetify.js 很陌生,但如果我能找到一个例子,那就足以让我运行了。
感谢您对此项目的建议。
最佳答案
您可以使用 Expandable rows 沿着这些思路做一些事情和 scoped slots :
Vue.config.productionTip = false;
Vue.component('my-component', {
template: '#my-component',
data() {
return {
headers: [
{ text: 'ID', value: 'id' },
{ text: 'Subject', value: 'subject' },
{ text: 'Assigned To', value: 'assignedTo' },
{ text: 'Date', value: 'date' },
{ text: 'Status', value: 'status' }
],
replyHeaders: [
{ text: 'Title', value: 'title' },
{ text: 'Date', value: 'date' }
],
tasks: [
{
id : 123,
subject: 'Need to do something',
assignedTo: 'John B',
date: '2020-02-01',
status: 'Active',
replies: [
{ id: 1, title: 'User request was submitted', date: '2020-02-01'},
{ id: 2, title: 'Called User', date: '2020-02-01'},
{ id: 3, title: 'User called back with details', date: '2020-02-02'},
{ id: 4, title: 'Waiting on pc support to fix', date: '2020-02-03'}
]
},
{
id : 223,
subject: 'Need to do something else',
assignedTo: 'Jason Q',
date: '2020-02-04',
status: 'Closed',
replies: [
{ id: 5, title: 'User Email - Password Reset', date: '2020-02-04'},
{ id: 6, title: 'Called user and reset password', date: '2020-02-04'}
]
}
],
};
}
});
var vm = new Vue({
el: '#app',
vuetify: new Vuetify()
});
.sub-table.theme--light.v-data-table { background: transparent; }
.sub-table .v-data-table-header { display: none; }
<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"> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script> <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><style>.as-console-wrapper{display: none!important}</style>
<div id="app">
<v-app>
<my-component></my-component>
</v-app>
</div>
<template id="my-component">
<v-data-table
:headers="headers"
:items="tasks"
item-key="id"
class="elevation-1"
show-expand
>
<template v-slot:expanded-item="{ headers, item }">
<td :colspan="headers.length">
<v-data-table
class="sub-table"
:headers="replyHeaders"
:items="item.replies"
item-key="id"
class="elevation-0"
hide-default-footer
></v-data-table>
</td>
</template>
</v-data-table>
</template>
关于javascript - 使用 vuetify.js 创建表和子表——不知道从哪里开始,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60459790/