使用组件时需要安装sortablejs
$ npm install sortablejs --save
组件
<template>
<el-table ref="dragTable" :data="tableData" class="drag-table" border stripe :row-key="uniqueKey" tooltip-effect="dark" height="100%" element-loading-text="拼命加载中" v-loading="loading" element-loading-spinner="el-icon-loading">
<el-table-column v-if="select" type="selection" :reserve-selection="multiple"></el-table-column>
<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
<el-table-column v-for="(item, index) in col" v-if="item" :key="`col_${index}`" :prop="dropCol[index].prop" :min-width="item.width || null" :label="item.label" align="center" show-overflow-tooltip sortable class-name="allow-drag">
</el-table-column>
</el-table>
</template>
<script>
import Sortable from 'sortablejs'
export default {
name: 'DragTable',
props: {
tableData: {
type: Array,
default: () => {
return []
}
},
tableHeader: {
type: Array,
default: () => {
return []
}
},
select: {
type: Boolean,
default: false
},
multiple: {
type: Boolean,
default: false
},
uniqueKey: String, // 行唯一值如id
loading: {
type: Boolean,
default: false
}
},
data () {
return {
dropCol: []
}
},
computed: {
col: function () {
let fillArray = this.select ? new Array(2).fill(null) : new Array(1).fill(null)
return fillArray.concat(this.tableHeader)
}
},
methods: {
columnDrop () {
const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
draggable: '.allow-drag',
onEnd: evt => {
const oldItem = this.dropCol[evt.oldIndex]
this.dropCol.splice(evt.oldIndex, 1)
this.dropCol.splice(evt.newIndex, 0, oldItem)
}
})
}
},
created () {
let fillArray = this.select ? new Array(2).fill(null) : new Array(1).fill(null)
this.dropCol = fillArray.concat(this.tableHeader)
},
mounted () {
this.columnDrop()
}
}
</script>
<style lang="less" scoped>
/deep/ .drag-table {}
</style>
使用方式
<drag-table :tableData="listTableData" :tableHeader="tableHeader" :loading='btnValid.search' uniqueKey='createTime'></drag-table>
说明:
需要拖动的列设置class-name="allow-drag"
,在Sortable.create
中使用了draggable: '.allow-drag'
。draggable参数设置的是可拖动的列,不设置的列不能拖动,也不能作为可以拖动的列的落点。如果某一列可以换位置,但是不能拖动,可以使用参数filter: ".ignore-elements"
,不能拖动的列需要设置class-name="ignore-elements
。
这里使用了col和dropCol的原因是,拖动后原来的col数组里面的项并不会交换位置,但是视觉上表头交换了位置,所以需要一个可以交换位置的数组来弥补数据不能交换位置的情况。用同一个col经测试,交换时会有异常,比如表头没有拖动,但是数据实现了交换。