为 Vuetify 组件全局设置 props（在我的例子中为“v-data-table”）

Question

我的用例如下：

rows-per-page-items

的属性

v-data-table

的默认值为

[5,10,25,{"text":"$vuetify.dataIterator.rowsPerPageAll","value":-1}]

API文档

我想验证这个道具并将新值设置为

[10,25,50]

。现在我的应用程序中的许多地方都使用了数据表组件。所以，我的问题是：

有没有办法全局覆盖此属性，以便我的应用程序中的所有表都更改它？

Answer 1

您可能正在使用 Vuetify 2，但这可以通过 Vuetify 3 中的上下文默认值来实现

https://vuetifyjs.com/en/features/global-configuration/#contextual-defaults

createVuetify({ 默认值：{ 虚拟数据表：{ 每页项目行数：[10,25,50] }, }, })

否则，在 V2 中，您可以将原始数据表包装在您自己的组件中，该组件设置道具（并且可以调整其他任何内容，拥有更多道具等）。

<template>
  <v-data-table 
    v-bind="$attrs"
    rows-per-page-items: [10,25,50]
  >
    <slot></slot>
  </v-data-table>
</template>
export default {
    name="BiggerDataTable",
props:{
        someCustomProp: '', 
  }
}

二手：

<bigger-data-table 
  :headers="myheaders"
  :items="myitemdata"
  some-custom-prop='foo'
 />