使用
vuetify 3
,我尝试为表格设置自定义分页。一切进展顺利,除了 <v-select>
使用 width
忽略了
flex
<template>
<v-app>
<v-row class="mt-2">
<v-col cols="12" sm="12">
<div class="d-flex flex-wrap ga-3 justify-end">
<!-- Items per Page -->
<v-select
class="d-flex align-center"
label="Items per page"
density="comfortable"
:model-value="itemsPerPage"
:items="['5', '10', '25', '100']"
variant="outlined"
@update:model-value="itemsPerPage = parseInt($event,10)"
style="max-width: 150px"
></v-select>
<p class="d-flex align-center">
{{ page * itemsPerPage - itemsPerPage + 1 }} - {{ page *
itemsPerPage }} of {{ total }}
</p>
<!-- Pages selection -->
<v-pagination
class="d-flex align-center"
density="comfortable"
rounded="circle"
v-model="page"
:length="pageCount"
:total-visible="6"
></v-pagination>
</div>
</v-col>
</v-row>
</v-app>
</template>
还有脚本部分(只是为了
ref
,仅此而已)
<script setup>
import { ref } from 'vue'
const page = ref(1)
const itemsPerPage = ref(10)
const total = ref(150)
const pageCount = ref(10)
</script>
如果您观看
<v-select>
,您可以看到有一个style="max-width: 150px"
完全被忽略(主要是由于class="d-flex align-center"
,但我不知道如何使其协同工作)。
这里是 Vuetify Playground,可以通过实时片段更好地理解我的意思。
编辑:
第一张图片是现在的样子
这就是我想要的
select
的样子(加上中心对齐,我无法设置,除了使用边距或填充,但我想要一个更动态的情况)
有什么建议吗?
用检查器查看 DOM,部分问题在于类为
v-input__control
的内部 div 元素没有使用父 div 的完整宽度。将这一元素设置为 width: 100%
将会有所帮助。
<style scoped>
.v-select :deep(.v-input__control) {
width: 100%;
}
</style>
如果你想利用这个空间,你需要去掉这个元素。这实际上可以通过道具 hide-details
来完成隐藏提示和验证错误。设置为自动消息时,仅当有消息(提示、错误消息、计数器值等)要显示时才会呈现。
像这样添加道具:
<v-select
class="d-flex align-center"
label="Items per page"
density="comfortable"
:model-value="itemsPerPage"
:items="['5', '10', '25', '100']"
variant="outlined"
@update:model-value="itemsPerPage = parseInt($event, 10)"
style="max-width: 150px"
hide-details
></v-select>
这应该能达到你想要的外观。