[英]Vuetify: How to remove this specific prop content from the data table component?
In Vuetify, when I use the data-table component, by default I get a bunch of information displayed through the props, I succeeded to get rid of them (such as the previous and next icons), howver I can not get rid of the text below the 2 rows displayed here: 在Vuetify中,当我使用数据表组件时,默认情况下,我会通过道具显示一堆信息,我成功地摆脱了它们(例如上一个和下一个图标),但是我却无法摆脱在此处显示的两行下方的文本:
(I mean that 1-2 of 2 text) (我的意思是2个文本中的1-2个 )
Here is the code ( Codepen live demo ): 这是代码( Codepen现场演示 ):
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
v-model="selected"
item-key="name"
select-all
class="elevation-1"
rows-per-page-items=2
prev-icon=false
next-icon=false
>
<template slot="headerCell" slot-scope="props">
<v-tooltip bottom>
<span slot="activator">
{{ props.header.text }}
</span>
<span>
{{ props.header.text }}
</span>
</v-tooltip>
</template>
<template slot="items" slot-scope="props">
<td>
<v-checkbox
v-model="props.selected"
primary
hide-details
></v-checkbox>
</td>
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
</template>
</v-data-table>
</v-app>
</div>
I found the answer, I had to add this: 我找到了答案,我必须添加以下内容:
<template slot="pageText" slot-scope="props">
</template>
I mean if you add any text between <template>
tags it will appear below the table. 我的意思是,如果您在
<template>
标记之间添加任何文本,它将显示在表格下方。 In my case I did not put any text, so nothing is displayed. 就我而言,我没有输入任何文本,因此什么也不显示。 Hope this helps someone else in the future.
希望这对以后的人有所帮助。
I just found even a better and cleaner answer: 我刚刚找到了一个更好,更干净的答案:
Just add hide-actions
prop as follows: 只需添加
hide-actions
道具,如下所示:
<v-data-table
hide-actions
>
<!-- Rest of components -->
</v-data-table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.