Vue.js Vuetify 2中自定义标头的排序和筛选

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  template: `
    <v-app>
      <v-main>
        <v-container>
          <v-data-table
            :items="items"
            :headers="headers"
          >
            <template #header="{props, on: {sort}}">
              <tr>
                <th
                  v-for="header in props.headers"
                  :key="header.value"
                  @click="sort(header.value)"
                >
                  Le {{header.value}} <span
                    v-if="props.options.sortBy[0] === header.value"
                  >{{ props.options.sortDesc[0] ? 'desc' : 'asc'}}
                  </span>
                </th>
              </tr>
            </template>
          </v-data-table>
        </v-container>
      </v-main>
    </v-app>
  `,
  data(){
    return {
      headers: [{text: 'Number', value: 'number'}, {text: 'Letter', value: 'letter'}],
      items: Array.from({length: 5}, (_,i) => ({number: i+1, letter: String.fromCharCode(90-i)})),
    }
  },
  methods: {
    log(...x){console.log(...x)}
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app"></div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>