Started implementing vPaginator
This commit is contained in:
@@ -17,11 +17,12 @@
|
|||||||
{{item}}
|
{{item}}
|
||||||
</label>
|
</label>
|
||||||
</li>
|
</li>
|
||||||
|
<li v-show="unionColumns.length === 0">
|
||||||
|
<h6 class="dropdown-header">Keine Spalten auswählbar.</h6>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{ unionColumns }}
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|||||||
33
src/components/VPaginator.vue
Normal file
33
src/components/VPaginator.vue
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
<template>
|
||||||
|
|
||||||
|
<nav aria-label="Page navigation">
|
||||||
|
<ul class="pagination">
|
||||||
|
<li class="page-item">
|
||||||
|
<button class="page-link text-secondary">
|
||||||
|
<i class="bi bi-arrow-left" />
|
||||||
|
Zurück
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="page-item">
|
||||||
|
<button class="page-link text-secondary">
|
||||||
|
Weiter
|
||||||
|
<i class="bi bi-arrow-right" />
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
import { useEmployees } from '@/stores/employees'
|
||||||
|
|
||||||
|
const store = useEmployees()
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -24,11 +24,16 @@
|
|||||||
|
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
<h5 v-show="rows.length === 0" class="text-muted">Keine Daten anzuzeigen...</h5>
|
||||||
|
|
||||||
|
<VPaginator />
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
import EmployeesSimpleSearch from '@/components/Employees/EmployeesSimpleSearch.vue';
|
import EmployeesSimpleSearch from '@/components/Employees/EmployeesSimpleSearch.vue';
|
||||||
|
import VPaginator from '@/components/VPaginator.vue';
|
||||||
import { onMounted, reactive, computed } from 'vue'
|
import { onMounted, reactive, computed } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
@@ -67,9 +72,6 @@ const iconSort = computed(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
table {
|
|
||||||
/* table-layout: fixed; */
|
|
||||||
}
|
|
||||||
|
|
||||||
table thead tr:first-child th:first-child {
|
table thead tr:first-child th:first-child {
|
||||||
width: 51px;
|
width: 51px;
|
||||||
|
|||||||
Reference in New Issue
Block a user