vue3中el-tab拖拽排序点击确认刷新tab

在 Vue3 中，使用 Element UI (简称 El-UI) 的 `el-tabs` 组件实现拖拽排序功能，并在用户点击确认后刷新当前 Tab 列表，可以按照以下步骤操作：

1. 首先，你需要安装 Element Plus，它是 Element UI 的官方升级版本：`npm install element-plus`

2. 引入需要的组件和样式：

   import { ElTabs, ElTabPane } from 'element-plus';

3. 定义数据结构，包含 tab 的标题、标签页索引等，以及一个数组用于存储排序后的 tab 数据：

   const tabsData = [
     { name: 'Tab 1', index: 0 },
     { name: 'Tab 2', index: 1 },
     // 更多的 tab...
   ];

4. 在模板中使用 `v-model` 绑定数据到 `el-tabs` 和 `el-tab-pane`：

   <el-tabs v-model="activeIndex" @tab-click="handleTabClick">
     <template v-for="(item, index) in tabsData" :key="index">
       <el-tab-pane :label="item.name" :name="item.index">{{ item.name }}</el-tab-pane>
     </template>
   </el-tabs>

5. 实现拖拽排序功能，你可以使用第三方库如 Sortable.js 或者自定义事件处理函数。这里我们假设有一个拖拽事件处理器 `handleDrag`：

   const handleDrag = (e, { source, target }) => {
     const sourceIndex = source.dataset.index;
     const targetIndex = target.dataset.index;

     // 更新数据的顺序
     [tabsData[sourceIndex], tabsData[targetIndex]] = [tabsData[targetIndex], tabsData[sourceIndex]];
   };

6. 当用户点击确认按钮（比如通过一个独立的按钮 `confirmButton`）时，更新 `tabsData` 并触发视图更新：

   const confirmSort = () => {
     this.tabsData.sort((a, b) => a.index - b.index); // 按照新顺序排序
     this.activeIndex = this.tabsData[0].index; // 刷新第一个 tab
   };

   // 添加确认按钮的绑定
   <button @click="confirmSort">确认排序</button>

7. 最后，在组件的 `setup()` 或 `created()` 函数里添加必要的初始化和事件监听：

setup() {
  // ...
  watch(tabsData, () => {
    // 触发视图更新
    this.$emit('tab-updated', this.tabsData);
  });

  return {
    activeIndex: 0,
    tabsData
    // ...
  };
}

现在你已经实现了基本的拖拽排序和确认刷新功能。记得在实际项目中检查兼容性和性能优化。