如何避免 Buefy 中的响应表
How to avoid responsive tables in Buefy
在 Buefy table 中,我需要将数据显示为常规 table,所有媒体上的列都是水平的,而不是堆叠的卡片移动的。为了适应内容,我使用媒体查询来简单地隐藏除最重要的列之外的所有列。
<b-table :data="this.standings">
<template slot-scope="props">
<b-table-column field="pos" numeric>{{props.row.pos}}</b-table-column>
<b-table-column field="name">{{props.row.name}}</b-table-column>
<b-table-column field="details" :visible="useFullTable()">{{props.row.details}}</b-table-column>
...
隐藏详细列数据有效,但table在视口较小时仍会切换到卡片视图。
有什么方法可以禁用响应行为?请注意,我只想为这个 table 或视图执行此操作,我不想以不同方式设置全局断点或完全在应用程序中禁用反应式 tables。
根据documentation可以通过绑定table的mobile-cards
属性到false
来关闭移动卡。
根据我的理解,您应该能够使用以下方法完成这项工作:
<b-table :data="this.standings" :mobile-cards="false">
// Table content
</b-table>
在 Buefy table 中,我需要将数据显示为常规 table,所有媒体上的列都是水平的,而不是堆叠的卡片移动的。为了适应内容,我使用媒体查询来简单地隐藏除最重要的列之外的所有列。
<b-table :data="this.standings">
<template slot-scope="props">
<b-table-column field="pos" numeric>{{props.row.pos}}</b-table-column>
<b-table-column field="name">{{props.row.name}}</b-table-column>
<b-table-column field="details" :visible="useFullTable()">{{props.row.details}}</b-table-column>
...
隐藏详细列数据有效,但table在视口较小时仍会切换到卡片视图。
有什么方法可以禁用响应行为?请注意,我只想为这个 table 或视图执行此操作,我不想以不同方式设置全局断点或完全在应用程序中禁用反应式 tables。
根据documentation可以通过绑定table的mobile-cards
属性到false
来关闭移动卡。
根据我的理解,您应该能够使用以下方法完成这项工作:
<b-table :data="this.standings" :mobile-cards="false">
// Table content
</b-table>