vue + element 中tab标签页拖拽(拖动) sortablejs插件实现

业务需求

公司有一堆tab签，每个tab签里展示对应的数据，方便拖拽更换位置实现el-tabs标签页下的el-tab-pane拖拽效果，可以使用第三方插件sortable进行实现

效果图

1.npm安装sortable.js

npm install sortablejs --save

2.html代码块

<!--tabOptionList为遍历的数组 手动给el-tabs添加class，方便找到拖拽的哪一行-->
<el-tabs class="tabSign">
      <el-tab-pane
        v-for="item in tabOptionList"      
        :key="item.name"
        :name="item.name"       
      >
      </el-tab-pane>
    </el-tabs>

3. 在script下导入

import Sortable from "sortablejs"; //插件引入

4.js逻辑片段(const el 必须找到自己拖拽的那一列 )

data() {
    
    
    return {
    
    
      tabOptionList: [
        {
    
     name: "1", label: "精确数据" },
        {
    
     name: "2", label: "待确认数据" },
        {
    
     name: "3", label: "111" },
        {
    
     name: "4", label: "222" },
        {
    
     name: "5", label: "333" },
        {
    
     name: "6", label: "444" },
      ],                
    };
  },
mounted() {
    
    
    this.rowDrop(); //初始化拖拽方法
  },
methods: {
    
    
    //拖拽方法
    rowDrop() {
    
    
      const el = document.querySelector(".tabSign .el-tabs__nav"); //找到想要拖拽的那一列
      const _this = this;
      Sortable.create(el, {
    
    
        onEnd({
     
      newIndex, oldIndex }) {
    
    
          //oldIIndex拖放前的位置， newIndex拖放后的位置  //tabOptionList为遍历的tab签
          const currRow = _this.tabOptionList.splice(oldIndex, 1)[0]; //鼠标拖拽当前的el-tabs-pane
          _this.tabOptionList.splice(newIndex, 0, currRow); //tableData 是存放所以el-tabs-pane的数组
        },
      });
    },
 }

5.注意：

const el = document.querySelector(“.tabSign .el-tabs__nav”);自己项目里找到要拖拽的列。

_this.tabOptionList自己项目里对应的选项卡数组。

至此，tab签拖拽效果完美实现。