el-table实现行拖拽(Vue3.0)
*注意!!row-key绑定的值要唯一!!
<template>
<div class="page_eight">
<el-table :data="tableData" row-key="id">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column prop="date" label="日期"></el-table-column>
</el-table>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import Sortable from "sortablejs";
export default defineComponent({
name: "pageSeven",
components: {},
setup() {
const state = reactive({
tableData: [
{
id: "1",
date: "2016-05-02",
name: "王小虎1",
address: "上海市普陀区金沙江路 100 弄",
},
{
id: "2",
date: "2016-05-04",
name: "王小虎2",
address: "上海市普陀区金沙江路 200 弄",
},
{
id: "3",
date: "2016-05-01",
name: "王小虎3",
address: "上海市普陀区金沙江路 300 弄",
},
{
id: "4",
date: "2016-05-03",
name: "王小虎4",
address: "上海市普陀区金沙江路 400 弄",
},
],
});
// 行拖拽
function rowDrop() {
const tbody = document.querySelector( ".el-table__body-wrapper tbody" ) as HTMLElement;
Sortable.create(tbody, {
animation: 180,
delay: 0,
// 结束拖拽后的回调函数
onEnd: (evt: { newIndex: any; oldIndex: any }) => {
const currentRow = state.tableData.splice(evt.oldIndex, 1)[0];
state.tableData.splice(evt.newIndex, 0, currentRow);
},
});
}
onMounted(() => {
rowDrop();
});
return {
...toRefs(state),
rowDrop,
};
},
});
</script>
<style lang="scss">
.page_eight {
width: 100%;
height: 100%;
}
</style>