如何更改 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" ，您可以根據需要對其進行修改。