Merge pull request Tokyo-Metro-Gov#3119 from kzhrk/feature/3110-table-th

v-data-tableのtbodyの日付セルをthに変更
kazuomatz · Apr 13, 2020 · 548acad · 548acad
2 parents 8ed5e9f + 12e70aa
commit 548acad
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 5 deletions.
diff --git a/components/AgencyBarChart.vue b/components/AgencyBarChart.vue
@@ -28,7 +28,18 @@
       :mobile-breakpoint="0"
       class="cardTable"
       item-key="name"
-    />
+    >
+      <template v-slot:body="{ items }">
+        <tbody>
+          <tr v-for="item in items" :key="item.text">
+            <th class="text-start">{{ item.text }}</th>
+            <td class="text-start">{{ item[0] }}</td>
+            <td class="text-start">{{ item[1] }}</td>
+            <td class="text-start">{{ item[2] }}</td>
+          </tr>
+        </tbody>
+      </template>
+    </v-data-table>
   </data-view>
 </template>
 

diff --git a/components/DataTable.vue b/components/DataTable.vue
@@ -14,7 +14,19 @@
       :mobile-breakpoint="0"
       :custom-sort="customSort"
       class="cardTable"
-    />
+    >
+      <template v-slot:body="{ items }">
+        <tbody>
+          <tr v-for="item in items" :key="item.text">
+            <th class="text-start">{{ item['公表日'] }}</th>
+            <td class="text-start">{{ item['居住地'] }}</td>
+            <td class="text-start">{{ item['年代'] }}</td>
+            <td class="text-start">{{ item['性別'] }}</td>
+            <td class="text-center">{{ item['退院'] }}</td>
+          </tr>
+        </tbody>
+      </template>
+    </v-data-table>
     <div class="note">
       {{ $t('※退院には、死亡退院を含む') }}
     </div>
@@ -52,6 +64,10 @@
       tr {
         color: $gray-1;
 
+        th {
+          font-weight: normal;
+        }
+
         td {
           padding: 8px 10px;
           height: auto;
@@ -63,6 +79,7 @@
         }
 
         &:nth-child(odd) {
+          th,
           td {
             background: rgba($gray-4, 0.3);
           }

diff --git a/components/MetroBarChart.vue b/components/MetroBarChart.vue
@@ -28,7 +28,18 @@
       :mobile-breakpoint="0"
       class="cardTable"
       item-key="name"
-    />
+    >
+      <template v-slot:body="{ items }">
+        <tbody>
+          <tr v-for="item in items" :key="item.text">
+            <th class="text-start">{{ item.text }}</th>
+            <td class="text-start">{{ item[0] }}</td>
+            <td class="text-start">{{ item[1] }}</td>
+            <td class="text-start">{{ item[2] }}</td>
+          </tr>
+        </tbody>
+      </template>
+    </v-data-table>
     <template v-slot:footer>
       <external-link
         :url="'https://smooth-biz.metro.tokyo.lg.jp/pdf/202004date3.pdf'"

diff --git a/components/TimeBarChart.vue b/components/TimeBarChart.vue
@@ -50,7 +50,16 @@
       :mobile-breakpoint="0"
       class="cardTable"
       item-key="name"
-    />
+    >
+      <template v-slot:body="{ items }">
+        <tbody>
+          <tr v-for="item in items" :key="item.text">
+            <th class="text-start">{{ item.text }}</th>
+            <td class="text-start">{{ item['0'] }}</td>
+          </tr>
+        </tbody>
+      </template>
+    </v-data-table>
     <template v-slot:infoPanel>
       <data-view-basic-info-panel
         :l-text="displayInfo.lText"

diff --git a/components/TimeStackedBarChart.vue b/components/TimeStackedBarChart.vue
@@ -83,8 +83,19 @@
       :fixed-header="true"
       :disable-sort="true"
       :mobile-breakpoint="0"
+      class="cardTable"
       item-key="name"
-    />
+    >
+      <template v-slot:body="{ items }">
+        <tbody>
+          <tr v-for="item in items" :key="item.text">
+            <th class="text-start">{{ item.text }}</th>
+            <td class="text-start">{{ item['0'] }}</td>
+            <td class="text-start">{{ item['1'] }}</td>
+          </tr>
+        </tbody>
+      </template>
+    </v-data-table>
     <p :class="$style.DataViewDesc">
       <slot name="additionalNotes" />
     </p>