效果图:
<a-table :dataSource="dataSource" :columns="columns" :pagination="false"><template #bodyCell="{ column, record }"><template v-if="column.key === 'td'"><div style="cursor: pointer;" :draggable="true" @dragstart="dragstart(record, $event)" @dragenter="dragenter(record, $event)" @dragend="dragend(record, $event)"><more-outlined /></div></template></template>
</a-table>
const dataSource = ref([{key: '1',name: 'a',age: 1,address: 1,icon: ""},{key: '2',name: 'b',age: 0,address: 2,icon: ""},{key: '3',name: 'c',age: 0,address: 2,icon: ""},{key: '4',name: 'd',age: 0,address: 2,icon: ""},
])const columns = ref([{title: '',dataIndex: 'td',key: 'td'},{title: '名称',dataIndex: 'name',key: 'name',}
])
const oldData = ref(null);
const newData = ref(null);
function dragstart(record, e) {oldData.value = record
}
function dragenter(record, e) {newData.value = record
}
function dragend(record, e) {if (oldData.value !== newData.value) {let oldIndex = dataSource.value.indexOf(oldData.value)let newIndex = dataSource.value.indexOf(newData.value)//将oldIndex下标的数据和newIndex下标的数据在dataSource.value的位置调换一下dataSource.value.splice(oldIndex,1,newData.value);dataSource.value.splice(newIndex,1,oldData.value);}
}