javascript - Vuetify - 更改表页脚中选择输入的样式

Question

我们正在为我们的应用程序使用 Vuetify，其中整个应用程序都使用这样的轮廓文本/选择字段:

这是文档中的表定义:

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

但这使得表格变成了这样:

如您所见，表格默认使用常见的 Material 文本字段样式。你能告诉我如何将这个选择字段更改为我们的轮廓样式吗？谢谢。

Answer 1

您可以使用 v-data-table 组件的可用插槽将选择字段更改为轮廓样式。在您的情况下使用页脚槽。 Slot接收以下参数:

{
  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: []
}

您可以创建一个自定义组件，它将参数用作 props 并使用 outlined 属性呈现选择组件。

<template>
  <v-select :items="items" label="Outlined style" outlined></v-select>
</template>

<script>
export default {
  name: "vue-custom-component",
  data: function () {
    return {
      items: [],
    };
  },
  props: {
    currentPage: {
      type: Number,
      required: true,
    },
    itemsPerPage: {
      type: Number,
      required: true,
    },
    itemsLength: {
      type: Number,
      required: true,
    },
    pageCount: {
      type: Number,
      required: true,
    },
  },
  mounted() {
    //here you could fill items
  },
};
</script>

<style lang='scss'>
</style>

在页脚槽中使用自定义组件的示例。

<v-data-table
  :items="items"
>
  <template v-slot:footer="{ props }">
    <v-row align="center">
      <v-col class="d-flex" cols="12" sm="6">
        <vue-custom-component
          :currentPage="props.pagination.page"
          :itemsPerPage="props.pagination.itemsPerPage"
          :itemsLength="props.pagination.itemsLength"
          :pageCount="props.pagination.pageCount"
        ></vue-custom-component>
      </v-col>
    </v-row>
  </template>
</v-data-table>

Here你可以找到详细信息