Vue3+element plus实现el-tab-pane拖拽排序(基于Sortable.js)

实现el-tab-pane拖拽排序的步骤如下：

1. 安装sortablejs和@vue/composition-api

npm install sortablejs @vue/composition-api --save

2. 在Vue组件中导入Sortable和reactive

import Sortable from 'sortablejs';
import { reactive } from '@vue/composition-api';

3. 创建一个响应式对象来存储tab列表

const tabs = reactive({
  list: [
    { label: 'Tab 1', content: 'Content of Tab 1' },
    { label: 'Tab 2', content: 'Content of Tab 2' },
    { label: 'Tab 3', content: 'Content of Tab 3' }
  ]
});

4. 在页面中使用el-tabs和el-tab-pane组件来展示tab列表，并使用v-for指令循环展示tab列表

<el-tabs v-model="activeTab">
  <el-tab-pane v-for="(tab, index) in tabs.list" :key="index" :label="tab.label">
    {{ tab.content }}
  </el-tab-pane>
</el-tabs>

5. 在mounted钩子函数中使用Sortable创建可拖拽的tab列表，并监听其排序事件

mounted() {
  let el = this.$el.querySelector('.el-tabs__nav-wrap');
  new Sortable(el, {
    animation: 150,
    onEnd: (evt) => {
      let fromIndex = evt.oldIndex;
      let toIndex = evt.newIndex;
      tabs.list.splice(toIndex, 0, tabs.list.splice(fromIndex, 1)[0]);
    }
  });
}

6. 完成后，你就可以在页面上看到一个可拖拽排序的tab列表了。

完整代码如下：

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane v-for="(tab, index) in tabs.list" :key="index" :label="tab.label">
      {{ tab.content }}
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import Sortable from 'sortablejs';
import { reactive } from '@vue/composition-api';

export default {
  name: 'SortableTabs',
  setup() {
    const tabs = reactive({
      list: [
        { label: 'Tab 1', content: 'Content of Tab 1' },
        { label: 'Tab 2', content: 'Content of Tab 2' },
        { label: 'Tab 3', content: 'Content of Tab 3' }
      ]
    });
    return { tabs };
  },
  mounted() {
    let el = this.$el.querySelector('.el-tabs__nav-wrap');
    new Sortable(el, {
      animation: 150,
      onEnd: (evt) => {
        let fromIndex = evt.oldIndex;
        let toIndex = evt.newIndex;
        this.tabs.list.splice(toIndex, 0, this.tabs.list.splice(fromIndex, 1)[0]);
      }
    });
  }
};
</script>