hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

table position

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-02-01 14:14:50 +07:00
parent ff3c5e3ef0
commit c7aa139d74
2 changed files with 99 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/modules/02_organizationalNew/components/listView.vue
View file

@ -116,7 +116,7 @@ async function fetchDataTable(id: string, level: number, action: boolean) {
.finally(() => {
setTimeout(() => {
isLoad.value = false;
}, 1500);
}, 500);
});
}

176
src/modules/02_organizationalNew/components/tableTree.vue
View file

@ -297,7 +297,6 @@ function updatePagination(newPagination: NewPagination) {
bordered
:paging="true"
dense
class="custom-header-table"
:rows-per-page-options="[10, 25, 50, 100]"
:filter="filter"
@update:pagination="updatePagination"
@ -376,84 +375,78 @@ function updatePagination(newPagination: NewPagination) {
<q-tr v-show="props.expand" :props="props">
<q-td colspan="100%">
<div class="text-left q-pa-md">
<div class="col-12">
<q-table
:columns="columnsExpand"
:rows="props.row.positions"
row-key="id"
bordered
dense
class="custom-header-table"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<q-th auto-width></q-th>
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<q-table
flat
:columns="columnsExpand"
:rows="props.row.positions"
row-key="id"
dense
hide-bottom
class="custom-header-table-expand"
>
<template v-slot:header="props">
<q-tr :props="props">
<q-th
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<span class="text-weight-medium">{{ col.label }}</span>
</q-th>
<!-- <q-th auto-width></q-th> -->
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
v-for="col in props.cols"
:key="col.name"
:props="props"
>
<div v-if="col.name == 'no'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
<q-td>
<q-btn
flat
dense
icon="mdi-dots-vertical"
class="q-pa-none q-ml-xs"
color="grey-13"
>
<q-menu>
<q-list
dense
style="min-width: 200px"
v-for="(item, index) in listMenu"
:key="index"
<div v-else>
{{ col.value }}
</div>
</q-td>
<!-- <q-td>
<q-btn
flat
dense
icon="mdi-dots-vertical"
class="q-pa-none q-ml-xs"
color="grey-13"
>
<q-menu>
<q-list
dense
style="min-width: 200px"
v-for="(item, index) in listMenu"
:key="index"
>
<q-item
clickable
v-close-popup
@click="
item.type === 'VIEWDETIAL'
? onClickViewDetail()
: null
"
>
<q-item
clickable
v-close-popup
@click="
item.type === 'VIEWDETIAL'
? onClickViewDetail()
: null
"
>
<q-item-section avatar>
<q-icon
:color="item.color"
:name="item.icon"
/>
</q-item-section>
<q-item-section>{{
item.label
}}</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td>
</q-tr>
</template>
</q-table>
</div>
<q-item-section avatar>
<q-icon :color="item.color" :name="item.icon" />
</q-item-section>
<q-item-section>{{ item.label }}</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</q-td> -->
</q-tr>
</template>
</q-table>
</div>
</q-td>
</q-tr>
@ -485,4 +478,31 @@ function updatePagination(newPagination: NewPagination) {
<DialogSort v-model:sort-position="modalSort" v-model:data="dataSort" />
</template>
<style scoped></style>
<style lang="scss" scoped>
.custom-header-table-expand {
height: auto;
.q-table tr:nth-child(odd) td {
background: white;
}
.q-table tr:nth-child(even) td {
background: white;
}
.q-table thead tr {
background: white;
}
.q-table thead tr th {
position: sticky;
z-index: 1;
}
/* this will be the loading indicator */
.q-table thead tr:last-child th {
/* height of all previous header rows */
top: 48px;
}
.q-table thead tr:first-child th {
top: 0;
}
}
</style>