目录
安装依赖 vuedraggable
安装 vuedraggable 的同时,会自动安装 sortablejs
npm i -S vuedraggable
或直接安装 sortablejs
npm install sortablejs --save
更多配置参考—— vue.draggable中文文档
http://www.itxst.com/vue-draggable/tutorial.html
实现拖拽的要点
使用class为 draggable 的div 包裹整个表格,以便拖拽代码中,准确抓取到拖拽元素的父容器
行拖拽要点
需在 el-table 标签中,根据行的内容指定行的唯一标识 row-key="id"
列拖拽要点
需额外定义两个数组,分别存储拖拽前的列顺序和拖拽后的列顺序
完整范例代码
<template>
<div class="draggable" style="padding: 20px">
<el-table
row-key="id"
:data="tableData"
style="width: 100%"
border
>
<el-table-column
v-for="(item,index) in oldList"
:key="`col_${index}`"
:prop="newList[index].prop"
:label="item.label"
align="center"
>
</el-table-column>
</el-table>
</div>
</template>
<script>
import Sortable from 'sortablejs';
export default {
mounted() {
this.oldList = JSON.parse(JSON.stringify(this.tableConfig.tableItems))
this.newList = JSON.parse(JSON.stringify(this.tableConfig.tableItems))
this.columnDrop()
this.rowDrop()
},
data() {
return {
oldList: [],
newList: [],
tableData: [
{
id:1,
name:'李一',
gender:'男',
age:30,
job:"会计"
},
{
id:2,
name:'王二',
gender:'未知',
age:18,
job:"无业游民"
},
{
id:3,
name:'张三',
gender:'男',
age:50,
job:"老板"
},
],
tableConfig: {
tableItems: [
{
label: '姓名',
prop: 'name',
},
{
label: '性别',
prop: 'gender',
},
{
label: '年龄',
prop: 'age',
},
{
label: '工作',
prop: 'job',
},
]
}
}
},
methods: {
// 行拖拽
rowDrop() {
// 此时找到的元素是要拖拽元素的父容器
const tbody = document.querySelector('.draggable .el-table__body-wrapper tbody');
const _this = this;
Sortable.create(tbody, {
// 指定父元素下可被拖拽的子元素
draggable: ".draggable .el-table__row",
onEnd({newIndex, oldIndex}) {
const currRow = _this.tableData.splice(oldIndex, 1)[0];
_this.tableData.splice(newIndex, 0, currRow);
}
});
},
// 列拖拽
columnDrop() {
const wrapperTr = document.querySelector('.draggable .el-table__header-wrapper tr');
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
onEnd: evt => {
const oldItem = this.newList[evt.oldIndex];
this.newList.splice(evt.oldIndex, 1);
this.newList.splice(evt.newIndex, 0, oldItem);
}
});
}
}
}
</script>
<style scoped>
</style>