自定义v-data-table标题并保留默认功能(排序)

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :sort-by="sortBy"
    :sort-desc="sortDesc"
    @update:sort-by="updateSortBy"
    @update:sort-desc="updateSortDesc"
  >
    <template v-slot:header="{ props }">
      <th>
        <span>自定义标题</span>
        <v-icon small>arrow_upward</v-icon>
        <v-icon small>arrow_downward</v-icon>
      </th>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: '列1', value: 'column1' },
        { text: '列2', value: 'column2' },
        { text: '列3', value: 'column3' },
      ],
      items: [
        { column1: '数据1', column2: '数据2', column3: '数据3' },
        { column1: '数据4', column2: '数据5', column3: '数据6' },
        { column1: '数据7', column2: '数据8', column3: '数据9' },
      ],
      sortBy: 'column1',
      sortDesc: false,
    };
  },
  methods: {
    updateSortBy(value) {
      this.sortBy = value;
    },
    updateSortDesc(value) {
      this.sortDesc = value;
    },
  },
};
</script>