Element UI table 顺序拖动
使用Sortable.js插件。对element-ui中的el-table进行拖拽行排序。
new Sortable(example1, {
animation: 150,
ghostClass: 'blue-background-class'
});
官网：
[1] Sortable.js官网配置项说明等
[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(); 方法
