element-ui + sortable.js 实现可拖拽表格
先看效果:
安装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>