<template>
<div>
<a-table
v-if="createTable"
:columns="columns"
:data-source="data"
:pagination="false"
>
<div
slot="action"
slot-scope="text"
class="move"
>移动</div>
<p
slot="expandedRowRender"
slot-scope="record"
style="margin: 0"
>
{{ record.description }}
</p>
</a-table>
</div>
</template>
<script>
export default {
data() {
return {
createTable:true,
data: [
{
key: 1,
name: "a",
age: 32,
address: "New York No. 1 Lake Park",
draggable:true,
description:
"a----My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.",
},
{
key: 2,
name: "b",
age: 42,
address: "London No. 1 Lake Park",
draggable:true,
description:
"b----My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.",
},
{
key: 3,
name: "c",
age: 32,
address: "Sidney No. 1 Lake Park",
draggable:true,
description:
"c----My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.",
},
],
columns: [
{ title: "Name", dataIndex: "name", key: "name" },
{ title: "Age", dataIndex: "age", key: "age" },
{ title: "Address", dataIndex: "address", key: "address" },
{
title: "Action",
dataIndex: "",
key: "x",
scopedSlots: { customRender: "action" },
},
],
};
},
mounted() {
this.rowDrop();
},
methods: {
//行拖拽
rowDrop() {
const rows = document.querySelectorAll(".ant-table-body .ant-table-row");
let orignIndex;
rows.forEach((e,i)=>{
let index = i;
let item = this.data[i];
e.draggable="true";
e.ondragstart=(event)=>{
console.log("event",event);
return false
}
let moveE = e.querySelector(".move");
moveE.onmouseover=(event)=>{
item.draggable = true;
}
moveE.onmouseout=(event)=>{
item.draggable = false;
}
e.ondragover = function(e){
e.preventDefault();
}
e.ondragstart=(event)=>{
if(item.draggable){
orignIndex = index;
}
return item.draggable;
}
e.ondrop=(event)=>{
let path = event.path;
let rowE = null;
for(let i=0;i<path.length;i++){
let p = path[i];
console.log('p.tagName',p.tagName);
if(p.tagName==="TR"){
rowE = p;
break;
}
}
let endIndex = Array.prototype.indexOf.call(rows,rowE);
console.log('endIndex',endIndex,orignIndex,rowE);
this.data[orignIndex] = this.data.splice(endIndex, 1, this.data[orignIndex])[0];
this.$nextTick(()=>{
this.rowDrop();
});
}
})
}
},
};
</script>
<style scoped>
.move{
color: #5555ff;
}
</style>
