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标签页的拖拽效果

Vue.js中Element UI下组件el-tabs的拖拽效果

相关推荐