返回 导航

其他

hangge.com

Vue.js - 实现ElementUI的tabs标签拖动排序功能（拖拽标签改变顺序）

作者：hangge | 2024-12-13 08:38
    在使用 Vue.js 和 Element UI 开发项目时，Tabs 组件常用于实现多标签切换功能。为了提升用户体验，我们有时会希望 Tabs 增加拖拽排序功能，使用户能够通过拖动标签改变其显示顺序。但原生组件并未提供这一功能，本文将详细介绍如何借助第三方库来实现。

1，准备工作

为了实现拖拽功能，我们需要使用一个轻量级的拖拽排序库 SortableJS。执行如下命令安装即可： 
npm install sortablejs

2，样例演示

（1）下面是实现 tabs 标签拖拽排序的具体代码：
<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" 
    v-on="$listeners" id="drag-tabs">
    <el-tab-pane v-for="item in tabList" :label="item.label" :key="item.name" :name="item.name">
      {{item.label}}
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  import Sortable from "sortablejs"

  export default {
    data() {
      return {
        activeName: 'second',
        tabList: [{
            label: '用户管理',
            name: 'first'
        }, {
            label: '配置管理',
            name:'second'
        }, {            
            label: '角色管理',
            name: 'third'
        }, {
            label: '定时任务补偿',
            name: 'fourth'  
        }]
      };
    },
    mounted() {
      this.initDrag();
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      // 初始化拖动排序功能
      initDrag() {
        const el= document.querySelector('#drag-tabs .el-tabs__nav');
        const _this = this;
        // 拖动 tab 重新排序
        Sortable.create(el, {
            onEnd({ newIndex, oldIndex }) {  
               const tabList = _this.tabList;
               const item = tabList.splice(oldIndex-1, 1)[0];
               console.log(item,'item')
               // 将 item 插入到 newIndex 位置
               tabList.splice(newIndex-1, 0, item);
               // 抛出事件(用于发送给后端更新排序数据)
               _this.$emit('tabSortChanged', tabList, newIndex, oldIndex);
        　　}
        })
      }
    }
  }
</script>

（2）运行效果如下：
评论

全部评论（0）

回到顶部