element ui el-table sorttable实现表格拖拽排序(vuedraggable)
【代码】element ui el-table sorttable实现表格拖拽排序。
·
npm install sortablejs --save
如果已经安装了 vuedraggable ,则可以不用安装 sortablejs
npm install vuedraggable
<template>
<div style="width:800px" class="draggable">
// 这里的id需要是tableData数组中存在的,可以换成任意唯一值就行
<el-table :data="tableData" row-key="id" border align="left">
<el-table-column prop="date" label="日期" width="180">
</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>
</div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
data () {
return {
tableData: [
{
id: '1',
date: '2016-05-02',
name: '王小虎AAA',
address: '沈阳市普陀区金沙江路2000-1518弄'
},
{
id: '2',
date: '2016-05-04',
name: '王小虎BBB',
address: '北京市普陀区金沙江路2020-1618弄'
},
{
id: '3',
date: '2016-05-01',
name: '王小虎CCC',
address: '成都市普陀区金沙江路2040-1718弄'
},
{
id: '4',
date: '2016-05-03',
name: '王小虎DDD',
address: '天津市普陀区金沙江路2030-1818弄'
}
]
}
},
mounted () {
this.rowDrop()
},
methods: {
//行拖拽
rowDrop () {
const tbody = document.querySelector(
".draggable .el-table__body-wrapper tbody"
);
console.log(tbody, 'tbody')
const _this = this
Sortable.create(tbody, {
animation: 150,
draggable: ".draggable .el-table__row",
onEnd ({ newIndex, oldIndex }) {
const currRow = _this.tableData.splice(oldIndex, 1)[0]
const aa = _this.tableData.splice(newIndex, 0, currRow)
console.log(aa)
}
})
},
}
}
</script>
<style scoped>
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)