Vuetify3:v-data-table 固定宽度
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
我们在开发过程中,在展示列表数据的时候希望屏幕变小情况下列表固定宽度而不是响应式导致列表不美观,我们直接上代码:
<template>
<v-data-table
:headers="headers"
:items="items"
fixed-header
></v-data-table>
</template>
<script setup lang="ts">
const headers = ref([
{ text: 'Name', value: 'name', width: '150px' },
{ text: 'Email', value: 'email', width: '150px' },
{ text: 'Birthdate', value: 'birthdate', width: '150px' }
]);
const items= ref([
// ...数据项
])
</script>
上述是通过设置v-data-table
的 fixed-header
属性和headers
数组中每个对象的width
属性来实现。这个是根据相关文档描述来的,不过实际开发中,这种方法还是不行,在窗口缩小的时候,宽度依然是响应式宽度。所以我们可以使用另外一种方式来达到宽度固定:
<template>
<v-data-table
:headers="headers"
:items="items"
>
<template v-slot:item.Name="{ item }" >
<div class="text-grey w-[150px]">{{item.Name}}</div>
</template>
<template v-slot:item.email="{ item }" >
<div class="text-grey w-[150px]">{{item.email}}</div>
</template>
<template v-slot:item.birthdate="{ item }" >
<div class="text-grey w-[150px]">{{item.birthdate}}</div>
</template>
</v-data-table>
</template>
<script setup lang="ts">
const headers = ref([
{ text: 'Name', value: 'name', width: '150px' },
{ text: 'Email', value: 'email', width: '150px' },
{ text: 'Birthdate', value: 'birthdate', width: '150px' }
]);
const items= ref([
// ...数据项
])
</script>
这样通过自定义模型来达到我们想要的效果,所以vuetify3开发过程中对扩展性是非常的友好的。
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献11条内容
所有评论(0)