安装
npm i sortablejs -S
Demo代码
<template>
<avue-crud ref="dragTable" v-model="data" :data="list" :option="option">
<template slot="drag">
<svg-icon class="drag-handler" icon-class="drag" />
</template>
</avue-crud>
</template>
<script>
import Sortable from 'sortablejs'
export default {
data() {
return {
data: {},
list: [
{
id: 1,
name: '张三',
sex: '男',
date: '1994-02-23 00:00:00'
},
{
id: 2,
name: '李四',
sex: '女',
date: '1994-02-23 00:00:00'
},
{
id: 3,
name: '王五',
sex: '女',
date: '1994-02-23 00:00:00'
},
{
id: 4,
name: '赵六',
sex: '男',
date: '1994-02-23 00:00:00'
}
],
option: {
title: '表格的标题',
border: true,
align: 'center',
menuAlign: 'center',
menu: false,
column: [
{
label: '姓名',
prop: 'name'
},
{
label: '性别',
prop: 'sex'
},
{
label: '日期',
prop: 'date',
type: 'date',
format: 'yyyy-MM-dd hh:mm:ss',
valueFormat: 'yyyy-MM-dd hh:mm:ss'
},
{
label: '拖动重排序',
prop: 'drag',
slot: true
}
]
}
}
},
created() {
this.$nextTick(() => {
setTimeout(() => this.setSort(), 3000)
})
},
methods: {
setSort() {
const el = this.$refs.dragTable.$refs.table.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
this.sortable = Sortable.create(el, {
ghostClass: 'sortable-ghost',
setData: function(dataTransfer) {
dataTransfer.setData('Text', '')
},
onEnd: evt => {
const targetRow = this.list.splice(evt.oldIndex, 1)[0]
this.list.splice(evt.newIndex, 0, targetRow)
}
})
}
}
}
</script>
<style>
.sortable-ghost {
opacity: .8;
color: #fff!important;
background: #42b983!important;
}
</style>
<style scoped>
.drag-handler {
width: 20px;
height: 20px;
cursor: pointer;
}
</style>