Merge pull request #224 from actier-luchta/issue/221

CDataTable：[item.${header.key}]スロットの引数を修正
luchta-io · Aug 31, 2023 · 23078f7 · 23078f7
2 parents b018d50 + 2f6f868
commit 23078f7
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/src/components/dataDisplay/CDataTable.story.vue b/src/components/dataDisplay/CDataTable.story.vue
@@ -554,8 +554,8 @@ onMounted(() => {
         @click:row="logEvent('click:row', $event)"
         >
             <template v-slot:[`item.group`]="{item}">
-                <CChip :color="setGroupColor(item)" size="small">
-                    {{ item }}
+                <CChip :color="setGroupColor(item.value)" size="small">
+                    {{ item.value }}
                 </CChip>
             </template>
         </CDataTable>
@@ -706,7 +706,7 @@ onMounted(() => {
 
 | Name | Props (if scoped) | Description |
 | --- | --- | --- |
-| [`item.${header.key}`] | `{index: number, item: any}` | 動的slotを使用して特定の列の表示をカスタムできます。`header.key`はheader項目のキー`<key>`プロパティの名前を指定します |
+| [`item.${header.key}`] | `{index: number, item: {key: string, value: any, columns: any}}` | 動的slotを使用して特定の列の表示をカスタムできます。`header.key`はheader項目のキー`<key>`プロパティの名前を指定します |
 | bottom | ItemProps* | tableの下部に表示するコンテンツを指定します |
 | default | ItemProps* | tableに表示するコンテンツを指定します |
 | tbody | ItemProps* | tbodyタグ内に表示するコンテンツを指定します |

diff --git a/src/components/dataDisplay/CDataTable.vue b/src/components/dataDisplay/CDataTable.vue
@@ -277,8 +277,15 @@ watchEffect(() => {
                     <td v-show="showSelect" class="text-center">
                         <CCheckbox v-model="data.selectItems" :value="item[itemValue]" @change="changeCheckbox" :disabled="!isSelectItem(item)" />
                     </td>
-                    <td v-for="(header, index) in headers" :key="index" @click="emits('click:row', item[itemValue])" :class="headerAlign(header.align)">
-                        <slot :name="[`item.${header.key}`]" :item="item[header.key]" :index="index">
+                    <td v-for="header in headers" :key="header.key" @click="emits('click:row', item[itemValue])" :class="headerAlign(header.align)">
+                        <slot 
+                        :name="[`item.${header.key}`]" 
+                        :item="{
+                            key: header.key,
+                            value:item[header.key],
+                            columns: item
+                            }" 
+                        :index="index">
                             {{ item[header.key] }}
                         </slot>
                     </td>