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

2019/07/07 14:31
阅读数 1.7K

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

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部