52 lines
1.0 KiB
Vue
52 lines
1.0 KiB
Vue
<template>
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="items"
|
|
hide-default-footer
|
|
class="elevation-1"
|
|
>
|
|
<template v-slot:item.pilih="{ item }">
|
|
<v-checkbox
|
|
:model-value="isSelected(item.id)"
|
|
@change="toggleService(item.id)"
|
|
color="primary"
|
|
></v-checkbox>
|
|
</template>
|
|
|
|
<template v-slot:item.no="{ item }">
|
|
{{ item.no }}
|
|
</template>
|
|
</v-data-table>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits } from 'vue';
|
|
|
|
const props = defineProps({
|
|
headers: Array,
|
|
items: Array,
|
|
selectedItems: Array,
|
|
});
|
|
|
|
const emit = defineEmits(['update:selectedItems']);
|
|
|
|
const isSelected = (id) => props.selectedItems.includes(id);
|
|
|
|
const toggleService = (id) => {
|
|
const newSelection = isSelected(id)
|
|
? props.selectedItems.filter(serviceId => serviceId !== id)
|
|
: [...props.selectedItems, id];
|
|
|
|
emit('update:selectedItems', newSelection);
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.v-data-table {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.v-checkbox {
|
|
justify-content: center;
|
|
}
|
|
</style> |