elementplus+vue3+ts+setup 使用插槽的方式，在el-tab-pane前增加图标，并在el-tab-pane中加入el-dropdown组件并支持tab可切换

在Element Plus、Vue 3 和 TypeScript 的项目中，结合 `setup` 配合使用，如果你想在每个 `el-tab-pane` 前增加图标，并在 `el-tab-pane` 内部插入一个 `el-dropdown` 组件并且保持Tab的切换功能，你可以按照以下步骤操作：

首先，安装必要的依赖：

npm install @element-plus/components @vueuse/core

然后，在组件文件中引入元素Plus的Tab和Dropdown组件，以及 Vue Use 插件用于状态管理：

<template>
  <el-tabs v-model="activeIndex" type="border-card">
    <el-tab-pane v-for="(item, index) in tabs" :key="index">
      <template #header>
        <el-button class="tab-icon" @click="toggleDropdown(index)">
          <i :class="item.icon"></i> <!-- 图标 -->
        </el-button>
        <el-dropdown ref="dropdowns" :trigger="['hover']">
          <el-button slot="reference">更多操作</el-button>
          <el-dropdown-menu slot="dropdown">
            <!-- dropdown菜单内容 -->
            <el-menu-item v-for="menuItem in item.dropdownItems" :key="menuItem.value">
              {{ menuItem.label }}
            </el-menu-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
      <div v-if="activeIndex === index">{{ item.content }}</div>
    </el-tab-pane>
  </el-tabs>
</template>

接下来，设置 `setup` 函数，声明状态变量：

import { ElTabs, ElTabPane, ElButton, ElDropdown, ElDropdownMenu, ElMenuItem } from 'element-plus'
import { useComputedRef, useRouter } from '@vueuse/core'

const tabs = ref([{ icon: 'el-icon-setting', content: '选项一', dropdownItems: [{ value: '1', label: '操作一' }, { value: '2', label: '操作二' }] }]);
let activeIndex = useComputedRef(0); // 初始激活的tab

function toggleDropdown(index: number) {
  const dropdown = this.$refs.dropdowns[index];
  if (dropdown && dropdown.open) {
    dropdown.close();
  } else {
    dropdown?.open();
  }
}

export default {
  setup() {
    return {
      activeIndex,
      tabs,
      toggleDropdown,
    };
  },
};

现在你已经实现了这样的功能：每个`el-tab-pane`前面有一个图标按钮，点击后显示对应的`el-dropdown`下拉菜单，同时支持通过`v-model`属性进行Tab的切换。