Vue Element 表格实现拖拽排序
1、安装sortablejs2、在需要的页面引入3、具体使用,注意的是element table务必指定row-key,且row-key必须是唯一的,如 id,不然会出现排序不对的情况
·
1、安装sortablejs
npm install sortablejs --save
2、在需要的页面引入
import Sortable from ‘sortablejs’
3、具体使用,注意的是element table务必指定row-key,且row-key必须是唯一的,如 id,不然会出现排序不对的情况
<el-table row-key="id" :data="tableData" style="width: 100%">
<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>
data() {
return {
tableData: [{
id:7458963256145,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id:1256358945623,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id:7485968563232,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id:4230568745963,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
mounted () {
// 调用 table拖拽排序
this.rowDrop()
this.columnDrop()
}
methods: {
// 行拖拽
rowDrop () {
let tbody = document.querySelector('.el-table__body-wrapper tbody')
let _this = this
Sortable.create(tbody, {
// or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
group: {
name: 'words',
pull: true,
put: true
},
animation: 150, // ms, number 单位:ms,定义排序动画的时间
onAdd: function (evt) { // 拖拽时候添加有新的节点的时候发生该事件
console.log('onAdd.foo:', [evt.item, evt.from])
},
onUpdate: function (evt) { // 拖拽更新节点位置发生该事件
console.log('onUpdate.foo:', [evt.item, evt.from])
},
onRemove: function (evt) { // 删除拖拽节点的时候促发该事件
console.log('onRemove.foo:', [evt.item, evt.from])
},
onStart: function (evt) { // 开始拖拽出发该函数
console.log('onStart.foo:', [evt.item, evt.from])
},
onSort: function (evt) { // 发生排序发生该事件
console.log('onUpdate.foo:', [evt.item, evt.from])
},
onEnd ({ newIndex, oldIndex }) { // 结束拖拽
let currRow = _this.tableData.splice(oldIndex, 1)[0]
_this.tableData.splice(newIndex, 0, currRow)
}
})
}
}
更多推荐
已为社区贡献13条内容
所有评论(0)