vxe-table 表格拖动上移下移

看官方也可以，例子都差不多。主要注意的是 row-key ref="xTable1" :data="tableData"

npm i sortablejs

vue导包：
import Sortable from 'sortablejs';
 

 

<template>
	<vxe-table border row-key ref="xTable1" class="sortable-row-demo" :scroll-y="{enabled: false}" :data="tableData">
		<vxe-table-column width="60">
			<template v-slot>
				<span class="drag-btn">
					<i class="vxe-icon--menu"></i>
				</span>
			</template>
			<template v-slot:header>
				<vxe-tooltip v-model="showHelpTip1" content="按住后可以上下拖动排序！" enterable>
					<i class="vxe-icon--question" @click="showHelpTip1 = !showHelpTip1"></i>
				</vxe-tooltip>
			</template>
		</vxe-table-column>
		<vxe-table-column field="name" title="Name" fixed="left">
		</vxe-table-column>
		<vxe-table-column title="Name1">
			<vxe-table-column title="Name2">
			<vxe-table-column field="sex" title="Sex"></vxe-table-column>
			<vxe-table-column field="age" title="Age"></vxe-table-column>
		</vxe-table-column>
		</vxe-table-column>
		
		<vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>
	</vxe-table>
</template>

<script>
	import XLSX from 'xlsx';
	import Sortable from 'sortablejs';
	import {
		importExcel,
		get,
		post
	} from '@/api/board/scheduling'
	import {
		listlineAll
	} from "@/api/panasonic/line";

	export default {
		data() {
			return {
				showHelpTip1: false,
				tableData: [{
						id: 10001,
						name: 'Test1',
						nickname: 'T1',
						role: 'Develop',
						sex: 'Man',
						age: 28,
						address: 'Shenzhen'
					},
					{
						id: 10002,
						name: 'Test2',
						nickname: 'T2',
						role: 'Test',
						sex: 'Women',
						age: 22,
						address: 'Guangzhou'
					},
					{
						id: 10003,
						name: 'Test3',
						nickname: 'T3',
						role: 'PM',
						sex: 'Man',
						age: 32,
						address: 'Shanghai'
					},
					{
						id: 10004,
						name: 'Test4',
						nickname: 'T4',
						role: 'Designer',
						sex: 'Women ',
						age: 23,
						address: 'Shenzhen'
					},
					{
						id: 10005,
						name: 'Test5',
						nickname: 'T5',
						role: 'Develop',
						sex: 'Women ',
						age: 30,
						address: 'Shanghai'
					}
				]
			}
		},
		created() {
			this.rowDrop()
		},
		beforeDestroy() {
			if (this.sortable1) {
				this.sortable1.destroy()
			}
		},
		methods: {
			rowDrop() {
				this.$nextTick(() => {
					const xTable = this.$refs.xTable1
					this.sortable1 = Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
						handle: '.drag-btn',
						onEnd: ({
							newIndex,
							oldIndex
						}) => {
							const currRow = this.tableData.splice(oldIndex, 1)[0]
							this.tableData.splice(newIndex, 0, currRow)
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.do-color {
		&:hover {
			color: #1296DB;
		}
	}
</style>

 

 

 

效果图【图片为实际业务中，上面是伪代码】：