Vuetify data-table body.append slot 移动断点答案

【问题标题】：Vuetify data-table body.append slot mobile breakpointsVuetify data-table body.append slot 移动断点
【发布时间】：2021-01-16 23:45:50
【问题描述】：

我在一个使用 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"？

【问题讨论】：

标签： vue.js vuejs2 datatable vue-component vuetify.js

【解决方案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'
   }
}

【讨论】：