先看效果;
安装Sortablejs
npm install sortablejs --save
demo
<template>
<el-table id=;draggable-table; row-key=;id; :data=;tableData;>
<el-table-column label=;序号; type=;index; width=;50;></el-table-column>
<el-table-column prop=;name; label=;姓名; width=;180;></el-table-column>
<el-table-column prop=;address; label=;地址;></el-table-column>
</el-table>
</template>
<script>
import Sortable from ;sortablejs;
export default {
name: ;draggable-table;,
data() {
return {
tableData: [
{
id: 1,
name: ;person-1;,
address: ;address-1;
},
{
id: 2,
name: ;person-2;,
address: ;address-1;
},
{
id: 3,
name: ;person-3;,
address: ;address-1;
}
]
}
},
mounted() {
const el = document.querySelector(;#draggable-table tbody;);
const option = {
animation: 200,
onEnd: ({newIndex, oldIndex}) => {
const currRow = this.tableData.splice(oldIndex, 1)[0]
this.tableData.splice(newIndex, 0, currRow)
},
};
const sortable = Sortable.create(el, option);
}
}
</script>
<style scoped>
</style>