如何解决Vuetify / DataTable:更改“ show-group-by”按钮的样式?
我想在vuetify数据表中使用默认的分组功能。
效果很好,但我想更改默认的分组按钮样式,并用一个图标替换。
那可能吗?如果我检查开发工具中的按钮,它只会显示<span>group</span>
。
仅在文档中找到此:https://vuetifyjs.com/en/components/data-tables/#grouped-rows
编辑:至此,我知道了我想要什么。我正在寻找v-slot:header
的默认模板。这是我上面提到的按钮的生成位置,开始了分组。
解决方法
您可以使用group.header
插槽并为组标题(包括切换按钮)提供自己的模板,并使用道具中的toggle
方法,例如:
<template v-slot:group.header="{ group,headers,toggle,isOpen }">
<td :colspan="headers.length">
<v-btn @click="toggle" x-small icon :ref="group">
<v-icon v-if="isOpen">mdi-plus</v-icon>
<v-icon v-else>mdi-minus</v-icon>
</v-btn>
<span class="mx-5 font-weight-bold">{{ group }}</span>
</td>
</template>
,
我可以使用hide_default_header
替换v-data-table标题行中的默认排序图标和组按钮(看起来只是一个带有文本'group'的span标签)在v-data-table
上使用prop,然后使用header
插槽替换隐藏的标题行。 v-data-table docs
<template v-slot:header="props">
<thead>
<tr>
<template v-for="header in props.props.headers">
<th :key="header.value">
<span>{{ header.text }}</span>
<v-btn @click.stop="props.on.sort(header.value)" icon><v-icon>keyboard_arrow_down</v-icon></v-btn>
<v-btn @click.stop="props.on.group(header.value)" icon><v-icon>flip_to_back</v-icon></v-btn>
</th>
</template>
</tr>
</thead>
</template>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。