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