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

Question

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

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" label，而是显示"Custom Sort By Text" ，您可以根据需要对其进行修改。