如何更改 Vuetify 数据表中的标签“排序依据”？

Question

标签仅在v-data-table 顶部的移动视图中可见。我已经阅读了文档，并没有这样的道具可以修改“排序依据”标签。

Answer 1

我们可以通过将headerProps 添加到data 选项来轻松做到这一点，例如：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headerProps: {
        sortByText: "Custom Sort By Text"
      },
      headers: [
        //...
      ],
      items: [
        //...
      ]  
    }
  },
})

然后像这样更新模板：

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

现在，在移动视图中，默认的"Sort by" 标签将显示为"Custom Sort By Text"，您可以根据需要对其进行修改。