154 lines
6.6 KiB
Vue
154 lines
6.6 KiB
Vue
<template>
|
|
<div class="flex flex-col">
|
|
<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
|
<div
|
|
class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8"
|
|
>
|
|
<table class="min-w-full divide-y divide-gray-300">
|
|
<thead>
|
|
<tr>
|
|
<th
|
|
v-for="(heading, index) in headings"
|
|
:key="index"
|
|
:width="
|
|
heading['widthRatio'] != ''
|
|
? heading['widthRatio'] + '%'
|
|
: '100%'
|
|
"
|
|
:class="
|
|
index == 0
|
|
? 'py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 md:pl-0'
|
|
: 'py-3.5 px-3 text-left text-sm font-semibold text-gray-900'
|
|
"
|
|
scope="col"
|
|
>
|
|
{{ heading['title'] }}
|
|
</th>
|
|
|
|
<th
|
|
v-for="(action, index) in actions"
|
|
:key="index + headings.length"
|
|
:width="actions.length * 1"
|
|
class="relative py-3.5 pl-3 pr-4 sm:pr-6 md:pr-0"
|
|
scope="col"
|
|
>
|
|
<span class="sr-only">{{ action }}</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-200">
|
|
<tr v-for="(item, itemIndex) in data" :key="itemIndex">
|
|
<td
|
|
v-for="(heading, index) in headings"
|
|
:key="index"
|
|
:class="
|
|
index == 0
|
|
? 'whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 md:pl-0'
|
|
: 'whitespace-nowrap py-4 px-3 text-sm text-gray-500'
|
|
"
|
|
>
|
|
{{
|
|
columnFilter
|
|
? columnFilter(
|
|
heading['key'],
|
|
item[heading['key']]
|
|
)
|
|
: item[heading['key']]
|
|
}}
|
|
</td>
|
|
|
|
<td
|
|
class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6 md:pr-0"
|
|
>
|
|
<a
|
|
v-for="(action, index) in actions"
|
|
:key="index"
|
|
href="javascript:void(0)"
|
|
:class="index != 0 ? 'ml-3' : ''"
|
|
class="text-indigo-600 hover:text-indigo-900"
|
|
@click="doAction(action, item[actionKey])"
|
|
>{{ action
|
|
}}<span class="sr-only"
|
|
>, {{ item['serial'] }}</span
|
|
></a
|
|
>
|
|
</td>
|
|
</tr>
|
|
<tr v-if="data.length == 0">
|
|
<td
|
|
:colspan="headings.length"
|
|
class="whitespace-nowrap py-4 px-3 text-sm text-gray-500"
|
|
>
|
|
{{ noDataMessage }}
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<th
|
|
v-for="(heading, index) in headings"
|
|
:key="index"
|
|
:width="
|
|
heading['widthRatio'] != ''
|
|
? heading['widthRatio'] + '%'
|
|
: '100%'
|
|
"
|
|
:class="
|
|
index == 0
|
|
? 'py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 md:pl-0'
|
|
: 'py-3.5 px-3 text-left text-sm font-semibold text-gray-900'
|
|
"
|
|
scope="col"
|
|
>
|
|
{{
|
|
index == 0
|
|
? '합계'
|
|
: calcSum(heading['key'])
|
|
}}
|
|
</th>
|
|
|
|
<th
|
|
v-for="(action, index) in actions"
|
|
:key="index + headings.length"
|
|
:width="actions.length * 1"
|
|
class="relative py-3.5 pl-3 pr-4 sm:pr-6 md:pr-0"
|
|
scope="col"
|
|
>
|
|
<span class="sr-only">{{ action }}</span>
|
|
</th>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
headings: { type: Array<object>, required: true },
|
|
actions: { type: Array<string>, default: [] },
|
|
data: { type: Array<object>, required: true },
|
|
actionKey: { type: String, default: 'serial' },
|
|
columnFilter: {
|
|
type: Function,
|
|
default: (key: string, val: string) => val,
|
|
},
|
|
doAction: {
|
|
type: Function,
|
|
default: (key: string) => {
|
|
return key;
|
|
},
|
|
},
|
|
noDataMessage: { type: String, default: '조회된 데이터가 없습니다.' },
|
|
});
|
|
|
|
function calcSum(tag) {
|
|
let tmpSum = 0;
|
|
for (let i = 0; i < props.data.length; i++) {
|
|
tmpSum += props.data[i][tag];
|
|
}
|
|
return tmpSum;
|
|
}
|
|
</script>
|