第一步:安装sortable.js
npm install sortablejs --save
第二步:再组件中引入使用
import Sortable from "sortablejs";
第三步:实现行或者列拖拽
function setSort() {//行拖拽
const tbody = document.querySelector('#dragTable table tbody') as HTMLElement;
new Sortable(tbody, {
animation: 150,
sort: true,
ghostClass: 'sortable-ghost',
onEnd: (e: any) => {
console.log("e", e);
const targetRow = list.value.splice(e.oldIndex, 1)[0];
list.value.splice(e.newIndex, 0, targetRow);
},
});
}
function setSortCloumn() {//列拖拽
const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
Sortable.create(wrapperTr , {
animation: 180,
delay: 0,
onEnd: (evt:any) => {
// 跳过显示的列数量,如开头我们用了一个多选框
const oldItem = props.tableConfig.columns[evt.oldIndex];
props.tableConfig.columns.splice(evt.oldIndex, 1);
props.tableConfig.columns.splice(evt.newIndex, 0, oldItem);
//防止表头数据改变,但表头未重新渲染
//在自定义表头的时候,由于是用的v-for循环生成的,因此会给每个循环体一个固定的key,导致数据频繁异步更新时,因为这个key没有变,所以el-table觉得表头数据是没有变化的,因此就只更新了整体表格数据、key值有变化的列的表头。
mykey.value = Math.floor(Math.random()*1000+1)
}
});
}