element UI tab拖曳

骑猪看日落 2022-09-11 11:21 193阅读 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 条评论，193人围观）

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

相关阅读

相关 Element-UI

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

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

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

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

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

相关【element-ui】element ui table获取当前行索引

> `前言` (当前页数-1)\每页条数 + scope.$index + 1 (param.curpageno - 1) param.pagesize + sc

ゝ一纸荒年。/ 2022年10月30日 06:26/ 0 赞/ 29 阅读

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

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

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

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

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

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

相关 element UI tab拖曳

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

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

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

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

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

相关 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 赞/ 147 阅读

相关使用 Element-UI 的 el-tabs 组件，浏览器卡住了

使用 Element-UI 的 el-tabs 组件，浏览器卡住了问题正确的解决方案方案一、降级 \`element-ui\` 的版本到 \

向右看齐/ 2022年01月05日 10:19/ 0 赞/ 915 阅读

相关 element-ui tab切换加载echarts无法正常显示问题

`解决方案来源https://github.com/lizheng3401/echarts-in-element-doesn-t-work` 解决方法：设置当前key

谁借莪１个温暖的怀抱￠/ 2021年11月08日 16:32/ 0 赞/ 1017 阅读