v-data-table Vuetify 2.x 中 slot="headerCell" 的替代方案

Question

我正在尝试升级到 Vuetify 2.x 所以在旧版本中

    <template slot="headerCell" slot-scope="props">
<tableheader :props="props"/> (custom component where I am passing the props so that the header text along with number of row count is displayed) 
</template>

我注意到在较新的 vuetify 中不再使用 header 单元格。

如何使用较新版本执行相同的操作？我尝试使用“headers”，但我认为我做错了什么，因为道具没有正确传递

如果有人能解释这一点，那将非常有帮助，因为我是 Vue 的新手。谢谢

Answer 1

您有两个插槽 header 和 header.<name>，第一个用于自定义整个 header，第二个用于自定义一个列 <name> :

<template v-slot:header="props" >
   <tableheader :props="props"/>
</template>

或

<template v-slot:header.quantity="props" >
   <tableheader :props="props"/>
</template>

v-data-table Vuetify 2.x 中 slot="headerCell" 的替代方案

Alternative to slot="headerCell" in v-data-table Vuetify 2.x

vue.js

vuetify.js