Skip to content

V-data-table

기본 정렬

기본 정렬을 적용하고 싶다면, sort-desc와 sort-by="name"를 사용하면 된다. <v-data-table
hide-default-header
sort-desc
sort-by="name"
:items="items"
:search="filter"
:loading="loading"
:headers="headers"
:loading-text="$t('msg.loading')"
>
<-- ... -->
</v-data-table>

</template>

</syntaxhighlight>

Row 에서 커서 변경 방법

딥 셀렉터를 사용하여 적용한다. <v-data-table
class="row-pointer"
:headers="headers"
:items="tableItems"
:search="filterText"
:loading="showLoading"
:loading-text="$t('loading')"
@click:row="onClickRow"
></v-data-table>

</template>

<style lang="scss" scoped>

.row-pointer::v-deep tr {

cursor: pointer;

}

</style></syntaxhighlight>

참고로 @click:row를 사용하면 row 클릭 이벤트도 추가할 수 있다.

폼 중앙정렬

<div class="d-flex justify-center"> ... </div>를 사용하면 된다. <v-data-table>
<template v-slot:item.permission="{ item }">

`       `<v-select class="permission-select"></v-select>
`     `

</template>
</v-data-table>

</template>

<style lang="scss" scoped>

.permission-select {

max-width: 200px;

}

</style></syntaxhighlight>

See also