Vue进阶（幺零五）：element表格行列拖拽
【摘要】 element ui 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现。
git地址中文网
Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery requir...
element ui 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现。
Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Ember, Knockout and any CSS library, e.g. Bootstrap.
首先需要安装Sortable.js
npm install sortablejs --save
然后引用
import Sortable from ‘sortablejs’
需要注意的是element table务必指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。
示例代码
<template>
<div style="width:800px"> <el-table :data="tableData" border row-key="id" align="left"> <el-table-column v-for="(item, index) in col" :key="`col_${index}`" :prop="dropCol[index].prop" :label="item.label"> </el-table-column> </el-table> <pre style="text-align: left"> {{dropCol}} </pre> <hr> <pre style="text-align: left"> {{tableData}} </pre>
</div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
data() { return { col: [ { label: '日期', prop: 'date' }, { label: '姓名', prop: 'name' }, { label: '地址', prop: 'address' } ], dropCol: [ { label: '日期', prop: 'date' }, { label: '姓名', prop: 'name' }, { label: '地址', prop: 'address' } ], 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 弄' } ] }
},
mounted() { this.rowDrop() this.columnDrop()
},
methods: { //行拖拽 rowDrop() { const tbody = document.querySelector('.el-table__body-wrapper tbody') const _this = this Sortable.create(tbody, { group : { name : "words", pull : true, put : true }, animation : 150, //动画参数 onAdd : function(evt) {//拖拽时候添加有新的节点的时候发生该事件 }, 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 }) { const currRow = _this.tableData.splice(oldIndex, 1)[0] _this.tableData.splice(newIndex, 0, currRow) } }) }, //列拖拽 columnDrop() { const wrapperTr = document.querySelector('.el-table__header-wrapper tr') this.sortable = Sortable.create(wrapperTr, { animation: 180, delay: 0, onEnd: evt => { const oldItem = this.dropCol[evt.oldIndex] this.dropCol.splice(evt.oldIndex, 1) this.dropCol.splice(evt.newIndex, 0, oldItem) } }) }
}
}
</script>
<style scoped>
</style>
附 sortable排序保存后，怎么解绑拖拽排序功能
根据文档，有2种方式可以实现拖拽排序解绑，
要么你设置 disabled: true：
https://github.com/RubaXa/Sor…
要么你直接销毁当前的实例：
https://github.com/RubaXa/Sor…
_this.rootDepart.sortableObj = Sortable.create(el);
// 销毁排序
_this.rootDepart.sortableObj.destroy();
文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。
原文链接：shq5785.blog.csdn.net/article/details/105357684
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）