element UI tab拖曳

骑猪看日落 2022-09-11 11:21 206阅读 0赞

[SortableJS][] :javascript 拖曳库，有多牛我就不吹了，反正就是

**简单       ·         好用**

安装

npm install sortablejs --save

引入

import Sortable from 'sortablejs';

使用

<ul id="items">
    	<li>item 1</li>
    	<li>item 2</li>
    	<li>item 3</li>
    </ul>

var el = document.getElementById('items');
    var sortable = Sortable.create(el);

##  实现Tab拖曳 ##

<template>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
      </el-tabs>
    </template>
    <script>
      import Sortable from 'sortablejs';
      export default {
        data() {
          return {
            activeName: 'second',
            sortable：null
          };
        },
        methods: {
          handleClick(tab, event) {
            console.log(tab, event);
          },
          dragTab(){
                const tbody = document.querySelector(
                    ".el-tabs__nav"
                );
                if(tbody){
                    this.sortable = Sortable.create(tbody,{
                        animation: 250,
                    });
                }
            },
        }
      };
    </script>

[SortableJS]: https://github.com/SortableJS/Sortable

发表评论取消回复

表情：

评论列表（有 0 条评论，206人围观）

还没有评论，来说两句吧...

相关阅读

相关 Element-UI

目录 Layout 布局按钮组件结合 el-icon 使用单选框复选框日期组件表格分页对话框表单验证 -------------------

小咪咪/ 2024年03月22日 13:33/ 0 赞/ 83 阅读

相关 element-ui

vue-cli3集成element-ui: 1. vue create demo 2. vue add element 3. src\plugi

叁歲伎倆/ 2023年06月04日 12:51/ 0 赞/ 10 阅读

相关 element-ui的tabs默认选中页签

Element-UI提供了tabs组件（选项卡、多页签），其中在tabs的属性中提供了一个value/v-model属性来绑定默认选中的页签。 ![842514-201908

骑猪看日落/ 2023年06月04日 03:59/ 0 赞/ 20 阅读

相关 Element UI

[https://element.eleme.io/\/zh-CN/theme][https_element.eleme.io_zh-CN_theme] [https_el

野性酷女/ 2023年01月19日 12:55/ 0 赞/ 22 阅读

相关 Element UI学习5--Tabs 标签页

在很多网页中都运用了标签页，也就是选项卡的功能。之前介绍了用 jquery和 vant组件实现tab栏切换的方法，接下来介绍一下Element UI中Tabs 标签页的使用

朱雀/ 2023年01月07日 14:29/ 0 赞/ 432 阅读

相关 element ui 对tab的lable设置样式的方法

<el-tab-pane label="网游(14)" name="first" color=" red"> <searchLi

淡淡的烟草味﹌/ 2022年10月16日 04:46/ 0 赞/ 10 阅读

相关【 Element UI 】—Element UI 的基本使用

【 Element UI 】—Element UI 的基本使用一、基于命令行的方式手动安装 npm 安装 npm i element-ui -S

以你之姓@/ 2022年09月16日 04:45/ 0 赞/ 203 阅读

相关 element UI tab拖曳

[SortableJS][] :javascript 拖曳库，有多牛我就不吹了，反正就是简单 · 好用安装 npm in

骑猪看日落/ 2022年09月11日 11:21/ 0 赞/ 207 阅读

相关 element-ui显示和隐藏某个tab标签

> <el-tabs v-model="activeName" ref="tabs"> > <el-tab-pane label="基本信

客官°小女子只卖身不卖艺/ 2022年09月05日 05:19/ 0 赞/ 551 阅读

相关 Mint-ui+Element-ui tab-container实现tab与滑动级联

<div class="tab-nav"> <el-radio-group v-model="radio" size="mini" @change="t

柔光的暖阳◎/ 2022年09月03日 00:23/ 0 赞/ 160 阅读