请写一个基于vue3和naiveUI的根据选择器不同选择显示不同表头的例子

好的，我可以回答这个问题。以下是一个基于vue3和naiveUI的根据选择器不同选择显示不同表头的例子：

<template>
<div>
<el-select v-model="selected" placeholder="请选择">
<el-option label="表头1" value="1"></el-option>
<el-option label="表头2" value="2"></el-option>
<el-option label="表头3" value="3"></el-option>
</el-select>
<el-table :data="tableData" :columns="columns"></el-table>
</div>
</template>

<script>
import { ref } from 'vue';
import { ElTable, ElSelect, ElOption } from 'naive-ui';

export default {
components: {
ElTable,
ElSelect,
ElOption,
},
setup() {
const selected = ref('1');
const tableData = ref([
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' },
{ name: '王五', age: 22, gender: '男' },
]);
const columns = ref([
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' },
{ prop: 'gender', label: '性别' },
]);

const handleSelectChange = () => {
switch (selected.value) {
case '1':
columns.value = [
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' },
{ prop: 'gender', label: '性别' },
];
break;
case '2':
columns.value = [
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' },
];
break;
case '3':
columns.value = [
{ prop: 'name', label: '姓名' },
{ prop: 'gender', label: '性别' },
];
break;
}
};

return {
selected,
tableData,
columns,
handleSelectChange,
};
},
watch: {
selected: 'handleSelectChange',
},
};
</script>