zoukankan      html  css  js  c++  java
  • Vue.js中Element UI下组件el-tabs的拖拽效果

    为了实现el-tabs标签页下的el-tab-pane拖拽效果,可以使用第三方插件sortable进行实现,github 地址:https://github.com/SortableJS/Sortable 方法如下:

    1、npm安装sortable.js 

    $ npm install sortablejs --save

    2、在<script>下导入

    import Sortable from "sortablejs"

    3、代码如下

    mounted(){
        this.rowDrop();   //行拖拽效果
    }
    rowDrop() {
        const el= document.querySelector('.el-tabs_nav');
        const _this = this;
        Sortable.create(el, {
            onEnd({ newIndex, oldIndex }) {                             //oldIIndex拖放前的位置, newIndex拖放后的位置
            const currRow = _this.tableData.splice(oldIndex, 1)[0];    //鼠标拖拽当前的el-tabs-pane
            _this.tableData.splice(newIndex, 0, currRow);              //tableData 是存放所以el-tabs-pane的数组
          }
        })
    },

    4、列的拖拽类似,即可实现el-tabs标签页的拖拽效果

  • 相关阅读:
    se 键盘鼠标操作事件
    警告框操作方法(alert弹窗)
    se自带截图方法
    CSS Selector 高级用法
    吃奶酪
    互不侵犯
    hdu1102
    P4744 Iron man
    玉米田
    状压dp题单
  • 原文地址:https://www.cnblogs.com/xldbk/p/11146213.html
Copyright © 2011-2022 走看看