Javascript Vuetify-更改表尾中选择输入的样式

我们将Vuetify用于我们的应用程序，其中整个应用程序都使用如下概述的文本/选择字段：

这是我们在文档中的表定义：

<v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  ></v-data-table>

但这使得桌子是这样的：

---

如您所见，默认情况下，表格使用公共材质文本字段样式。您能告诉我如何将此选择字段更改为我们的大纲样式吗？谢谢。

我认为不可能直接更改输入的样式

相反，您可以隐藏默认页脚并添加客户页脚

以下是一个例子：

新Vue{ el:“应用程序”， vuetify：新的vuetify， 资料{ 返回{ 页码：1， 页面计数：0， 项目页码：10， 标题：[ { 文字：“甜点100克服务”， 对齐：“开始”， 可排序：false， 值：“名称”， }, {文本：'卡路里'，值：'卡路里'}， {text:'Fat g'，value:'Fat'}， {文本：'Carbs g'，值：'Carbs'}， {文本：'Protein g'，值：'Protein'}， {文本：'Iron%'，值：'Iron'}， ], 甜点：[ { 名称：“冷冻酸奶”， 卡路里：159， 脂肪：6.0， 碳水化合物：24， 蛋白质：4.0， 铁：1%， }, { 名称：“冰淇淋三明治”， 卡路里：237， fat:9.0， 碳水化合物：37， 蛋白质：4.3， 铁：1%， }, { 名称：“Eclair”， 卡路里：262， 脂肪：16.0， 碳水化合物：23， 蛋白质：6.0， 铁：7%， }, { 名字：“纸杯蛋糕”， 卡路里：305， 脂肪：3.7， 碳水化合物：67， 蛋白质：4.3， 铁：8%， }, { 名称：“姜饼”， 卡路里：356， 脂肪：16.0， 碳水化合物：49， 蛋白质：3.9， 铁：16%， }, { 名称：“果冻豆”， 卡路里：375， 脂肪：0.0， 碳水化合物：94， 蛋白质：0.0， 铁：0%， }, { 名称：“棒棒糖”， 卡路里：392， 脂肪：0.2， 碳水化合物：98， 蛋白质：0， 铁：“2%”， }, { 名称：“蜂巢”， 卡路里：408， fat:3.2， 碳水化合物：87， 蛋白质：6.5， 铁：45%， }, { 名称：“甜甜圈”， 卡路里：452， 脂肪：25.0， 碳水化合物：51， 蛋白质：4.9， 铁：22%， }, { 名称：“KitKat”， 卡路里：518， 脂肪：26.0， 碳水化合物：65， 蛋白质：7， 铁：6%， }, ], } }, }

---

通过使用v-data-table组件的可用插槽，可以将选择字段更改为大纲样式。在您的情况下，使用页脚槽。插槽接收以下参数：

{
  props: {
    options: {
      page: number
      itemsPerPage: number
      sortBy: string[]
      sortDesc: boolean[]
      groupBy: string[]
      groupDesc: boolean[]
      multiSort: boolean
      mustSort: boolean
    },
    pagination: {
      page: number
      itemsPerPage: number
      pageStart: number
      pageStop: number
      pageCount: number
      itemsLength: number
    },
    itemsPerPageText: string
  },
  on: {}
  headers: TableHeader[]
  widths: []
}

您可以创建一个自定义组件，该组件将使用参数作为道具，并使用outlined属性呈现select组件

导出默认值{ 名称：vue自定义组件， 数据：函数{ 返回{ 项目：[]， }; }, 道具：{ 当前页面：{ 类型：数字， 要求：正确， }, 项目页面：{ 类型：数字， 要求：正确， }, 项目长度：{ 类型：数字， 要求：正确， }, 页面计数：{ 类型：数字， 要求：正确， }, }, 安装{ //在这里你可以填写项目 }, };