<template>
<div class="container">
<el-table :data="tableData" border row-key="id">
<el-table-column
align="center"
v-for="(item, index) in col"
:key="`col_${index}`"
:prop="dropCol[index].prop"
:label="item.label"
></el-table-column>
</el-table>
</div>
</template>
<script>
import Sortable from "sortablejs";
export default {
data() {
return {
col: [
{
label: " date " ,
prop: "date"
},
{
label: " Name " ,
prop: "name"
},
{
label: " address " ,
prop: "address"
}
],
dropCol: [
{
label: " date " ,
prop: "date"
},
{
label: " Name " ,
prop: "name"
},
{
label: " address " ,
prop: "address"
}
],
tableData: [
{
id: 1,
date: "2016-05-02",
name: " Xiaohu 1 " ,
address: " Jinsha River Road, Putuo District, Shanghai, Lane 100 "
},
{
id: 2,
date: "2016-05-04",
name: " Xiaohu 2 " ,
address: " Jinsha River Road, Putuo District, Shanghai, Lane 200 "
},
{
id: 3,
date: "2016-05-01",
name: " Xiaohu 3 " ,
address: " Jinsha River Road, Putuo District, Shanghai, Lane 300 "
},
{
id: 4,
date: "2016-05-03",
name: " Xiaohu 4 " ,
address: " Jinsha River Road, Putuo District, Shanghai, Lane 400 "
}
]
};
},
components: {
},
mounted() {
// prevent the default behavior
document.body.ondrop = function (Event) {
event.preventDefault();
event.stopPropagation();
};
this.rowDrop();
this.columnDrop();
},
methods: {
// row drag
rowDrop () {
const tbody = document.querySelector(".el-table__body-wrapper tbody");
const _this = this;
Sortable.create(tbody, {
Önen ({newIndex, oldIndex}) {
const currRow = _this.tableData.splice(oldIndex, 1)[0];
_this.tableData.splice(newIndex, 0, currRow);
}
});
},
// Column dragging
columnDrop () {
const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
filter: ".cannotDrag",
onEnd: evt => {
const oldItem = this.dropCol[evt.oldIndex];
this.dropCol.splice(evt.oldIndex, 1);
this.dropCol.splice(evt.newIndex, 0, oldItem);
}
});
}
}
};
</script>
<style scoped lang="scss">
</style>
NOTE: When a page table when a plurality of selectors into querySelectorAll corresponding determination processing can be done;