Question

我在使用Vuetify数据表的vue组件中有这段代码。

<template slot="body.append">
    <tr>
       <th :colspan="6" class="text-right">Total:</th>               
    </tr>
</template>

问题是，在移动设备上，我的自定义tr行未获得类似于默认数据表的CSS类

<tr class="v-data-table__mobile-table-row">
  <td class="v-data-table__mobile-table-row"></td>
</tr>

如何像默认数据表一样动态添加这些类。还有什么方法可以禁用移动设备上的:colspan="6"？

Answer 1

如果断点名称等于xs（移动设备大小），则可以利用breakpoints并添加类绑定，因此添加一个检测到断点的计算调用移动设备：

<template slot="body.append">
    <tr :class="{'v-data-table__mobile-table-row':isMobile}">
       <th :colspan="`${isMobile?6:1}`" :class="{'v-data-table__mobile-row':isMobile}" class="text-right">Total:</th>               
    </tr>
</template>

....

computed:{
  isMobile(){
    return this.$vuetify.breakpoint.name==='xs'
   }
}

Vuetify数据表主体。附加插槽移动断点

1 个答案: