Element UI table 顺序拖动
使用Sortable.js插件。对element-ui中的el-table进行拖拽行排序。
new Sortable(example1, { animation: 150, ghostClass: 'blue-background-class' });
官网:
[2] Sortable更多使用示例
基本使用
1、安装
npm install sortablejs --save
2、引用
import Sortable from 'sortablejs'
3、使用
<el-table id="table" :data="list" row-key="id" style="width: 500px" > <el-table-column prop="name" label="称" width="180" /> <el-table-column label="操作"> <template slot-scope="scope"> <el-button class="handle" size="mini" ><i class="el-icon-rank" /> 移动</el-button> </template> </el-table-column> </el-table>
<script> // 引用 Sortable import Sortable from 'sortablejs' export default { data() { return { list: [] } }, mounted() { this.rowDrop(); }, methods: { //行拖拽,排序方法 rowDrop() { // 获取对象 const el = document.querySelector('#ability-table .el-table__body-wrapper tbody') const self = this // 配置 var ops = { handle: ".handle", onEnd({ newIndex, oldIndex }) { self.list.splice(newIndex, 0, self.list.splice(oldIndex, 1)[0]) const newArray = self.list.slice(0) newArray.forEach((value, index) => { value.orderNum = index + 1 //序号为index+1 self.$set(newArray, index, value) self.list= [] // self.$nextTick(() => { self.list= newArray ? newArray : [] }) } Sortable.create(el,ops) }, } </script>
说明:
orderNum
:为排序号
handle
: 使列表单元中符合选择器的元素成为拖动的手柄,只有按住拖动手柄才能使列表单元进行拖动
Array.splice() 方法有三个参数:
index
:规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。howmany
:要删除的项目数量。如果设置为 0,则不会删除项目。item1, ..., itemX
:向数组添加的新项目。
注意:
- newArray = Array.splice(0): 表示将原数组赋给新数组,并将原数组清空。
- 要在el-table渲染后调用 this.rowDrop(); 方法
- 组件绑定是根据Id绑定的:document.querySelector('#ability-table .el-table__body-wrapper tbody'),要注意父组件Id和子组件Id不要重名,否则会优先绑定到父组件对应的Id元素。
element关于table拖拽排序问题
最近在使用element table的时候,经常会遇到排序的问题,如果只是简单的排序的话,element官方已经给出了指定的方法
//table的默认排序方式是按ID排序 顺序为递减 这里可以改成其它 比如 order <el-table :data="tableData" :default-sort="{prop: 'ID', order: 'descending'}"> //设置sortable属性时出现排序按钮 <el-table-column prop="ID" label="座号" sortable> </el-table>
但是,element官方组件并不支持拖拽排序,我在这里引入sortablejs实现拖拽排序的功能
sortablejs GitHub地址
//sortablejs GitHub地址 https://github.com/SortableJS/Sortable#readme
//安装sortable.js Install with NPM: $ npm install sortablejs --save //在组件内引入 import Sortable from 'sortablejs' //为需要拖拽排序的表格添加ref属性 <el-table ref="dragTable"> //在数据渲染完毕添加拖拽事件 created(){ this.getBanner() }, methods:{ async getBanner(val){ await apiGetBanner().then((res)=>{ this.bannerTable = res.data.data; }) this.oldList = this.bannerTable.map(v => v.id); this.newList = this.oldList.slice(); this.$nextTick(() => { this.setSort() //数据渲染完毕执行方法 }) } setSort() { const el = this.$refs.dragTable.$el.querySelectorAll( '.el-table__body-wrapper > table > tbody' )[0]; this.sortable = Sortable.create(el, { // Class name for the drop placeholder, ghostClass: 'sortable-ghost', setData: function(dataTransfer) { dataTransfer.setData('Text', '') }, //拖拽结束执行,evt执向拖拽的参数 onEnd: evt => { //判断是否重新排序 if(evt.oldIndex !== evt.newIndex){ let data = { id:this.bannerTable[evt.oldIndex].id, banner_order:evt.newIndex } //数据提交失败则恢复旧的排序 apiPutBanner(data).catch(()=>{ const targetRow = this.bannerTable.splice(evt.oldIndex, 1)[0]; this.bannerTable.splice(evt.newIndex, 0, targetRow); }) } } }) } }
如果需要列拖拽的话,可以参考下面的代码,和上面是一样的原理,在这里我就不赘述了
//行拖拽 rowDrop() { const tbody = document.querySelector('.el-table__body-wrapper tbody') const _this = this Sortable.create(tbody, { 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) } }) }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。