element的tabs标签拖拽问题

袁公子123

已于 2024-02-21 10:32:35 修改

阅读量773

点赞数 7

文章标签： vue.js javascript ecmascript

于 2023-11-29 15:01:06 首次发布

本文链接：https://blog.csdn.net/weixin_40883720/article/details/134690245

版权

本文讲述了在使用Vue的ElementUI中的el-tabs组件时，由于新旧索引计算错误导致拖拽排序混乱的问题，作者通过调整`newIndex`和`oldIndex`处理方式解决了这个问题，并提供了修复后的代码示例。

摘要由CSDN通过智能技术生成

element的tabs标签拖拽

当前网上已经存在有相当多的案例，比如当前链接添加链接描述
在这里插入图片描述

按照他的使用，导致拖拽后排序错乱，排查问题后发现，newIndex, oldIndex不是下标信息，是从1开始的，而tab标签数据下标是从0开始的，因此导致错乱，以下是修改后的代码

<el-tabs class="tabSign">
      <el-tab-pane
        v-for="item in tabOptionList"
        :key="item.name"
        :label="item.name"
        :name="item.name"
      >
        {{ item.label }}
      </el-tab-pane>
    </el-tabs>

import Sortable from 'sortablejs' // 插件引入
data() {
    return {
      tabOptionList: [
        { name: '1', label: '111' },
        { name: '2', label: '222' },
        { name: '3', label: '333' },
        { name: '4', label: '444' },
        { name: '5', label: '555' },
        { name: '6', label: '666' }
      ],
      pageData: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.rowDrop() // 初始化拖拽方法
  },
   methods: {
    // 拖拽方法
    rowDrop() {
      const el = document.querySelector('.tabSign .el-tabs__nav') // 找到想要拖拽的那一列
      const _this = this
      Sortable.create(el, {
        onEnd({ newIndex, oldIndex }) {
          // 有时候位置会变为0，这时候默认改为1
          const newIndex2 = newIndex || 1
          const oldIndex2 = oldIndex || 1
          const currRow = JSON.parse(JSON.stringify(_this.layout[oldIndex2 - 1]))
          _this.layout.splice(oldIndex2 - 1, 1) // 删除旧的
          _this.layout.splice(newIndex2 - 1, 0, currRow) // 存入新的
          // 下面写自己的逻辑
        }
      })
    }
 },

此方法经过试验可行，希望对各位有所帮助