我可以在v-data-table的标题中使用v-select吗

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :search="search"
  >
    <template v-slot:header="{ props }">
      <th>
        <v-select
          v-model="selectedOption"
          :items="options"
          label="Select"
          @change="handleSelectChange"
        ></v-select>
      </th>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: 'Name', value: 'name' },
        { text: 'Age', value: 'age' },
      ],
      items: [
        { name: 'John', age: 25 },
        { name: 'Jane', age: 30 },
      ],
      search: '',
      selectedOption: null,
      options: [
        'Option 1',
        'Option 2',
        'Option 3',
      ],
    };
  },
  methods: {
    handleSelectChange() {
      // 根据选中的值进行相应的操作
      console.log('Selected option:', this.selectedOption);
    },
  },
};
</script>