Element 实现Table组件实现拖拽效果

一.引入插件

npm install sortablejs --save

二.table标签内加入 row-key="id"，一定要加入

mounted() {
		    // 阻止默认行为
		document.body.ondrop = function(event) {
			event.preventDefault();
			event.stopPropagation();
		};
		this.rowDrop();
	},
	methods: {
		//行拖拽
		rowDrop() {
			const tbody = document.querySelector('.el-table__body-wrapper tbody');
			const _this = this;
			Sortable.create(tbody, {
				async onEnd({ newIndex, oldIndex }) {
					const currRow = _this.tableData.splice(oldIndex, 1)[0];
					_this.tableData.splice(newIndex, 0, currRow);
					let params = _this.tableData;
					params.map((item, index) => {
						item.sort = index;
					});
					let res = await api.updateSortConfiguration(params);
					if (res.returnCode === '200') {
						_this.getTableList();
						// _this.$message.success('拖拽成功');
					}
				}
			});
		}
    }

<el-table :data="tableData" row-key="id" border>
				<el-table-column prop="index" label="序号" width="80"></el-table-column>
				<el-table-column prop="functionName" label="功能名称"></el-table-column>
				<el-table-column prop="functionCode" label="功能编码"></el-table-column>
				<el-table-column prop="visiable" label="状态">
					<template slot-scope="scope">
						<div>
							<span :class="scope.row.visiable === 0 ? ['circle1', 'circle'] : ['circle2', 'circle']"></span>
							{{ scope.row.visiable === 0 ? '已下架' : '已上架' }}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="aspectRatio" label="">
					<template slot="header" slot-scope="scope">
						<el-popover placement="top-start" width="200" trigger="hover" content="取1-24之间的整数，需满足24分栏布局">
							<div slot="reference" style="cursor:pointer">
								宽度比例
								<img src="@/assets/images/question.svg" alt="" />
							</div>
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column prop="height" label="高度(px)"></el-table-column>
				<el-table-column label="操作" width="200">
					<template slot-scope="scope">
						<div class="btn-div">
							<el-button type="text" size="small" @click="handleConfig(scope.row)">参数配置</el-button>
							<el-button
								v-if="scope.row.visiable === 0"
								type="text"
								size="small"
								@click="handleStatus(scope.row, scope.$index)"
							>
								上架
							</el-button>
							<el-button v-else type="text" size="small" @click="handleStatus(scope.row, scope.$index)">
								下架
							</el-button>
							<el-button type="text" size="small" @click="edit(scope.row, scope.$index)">编辑</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>