我们在开发过程中,在展示列表数据的时候希望屏幕变小情况下列表固定宽度而不是响应式导致列表不美观,我们直接上代码: 

<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.55 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:3 个月前 )
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> 5 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐