javascript - 使用 vuetify.js 创建表和子表——不知道从哪里开始

Question

所以我们有一个任务和回复系统，我需要在 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 很陌生，但如果我能找到一个例子，那就足以让我运行了。

感谢您对此项目的建议。

Answer 1

您可以使用 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>