el-tab拖拽排序

`el-tab` 是 Element UI 中的一个组件，它提供了一个可以方便地进行拖拽排序的选项卡功能。在 Vue.js 开发中，`el-tabs` 允许用户通过鼠标操作，将各个标签页拖动到新的位置，改变它们的显示顺序。这种交互设计增强了用户体验，使得用户能够轻松地调整内容的展示优先级。

在使用时，通常需要配合 Element UI 的 `draggable` 和 `@tab-drag-start`、`@tab-drag-end` 等事件处理程序，来监听用户的拖拽开始和结束，并根据事件更新 tab 的数据模型，从而实现实时的排序效果。

下面是一个简单的例子：

<template>
  <el-tabs v-model="activeName" @tab-drag-start="dragStart" @tab-drag-end="dragEnd">
    <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.name" :name="item.name">
      {{ item.content }}
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'tab1',
      tabs: [
        { name: 'tab1', content: 'Tab 1的内容' },
        { name: 'tab2', content: 'Tab 2的内容' },
        // 更多的 tab...
      ]
    };
  },
  methods: {
    dragStart(tab, e) {
      this.draggingIndex = tab.index;
    },
    dragEnd(e) {
      const newOrder = [...this.tabs];
      if (this.draggingIndex !== undefined) {
        const draggedTab = this.tabs[this.draggingIndex];
        newOrder.splice(this.draggingIndex, 1);
        newOrder.splice(e.newIndex, 0, draggedTab);
        this.tabs = newOrder;
      }
      this.draggingIndex = undefined;
    }
  }
};
</script>