vue+element-ui利用sortable.js实现el-table行拖拽排序功能

此功能借助Sortable.js来实现 中文网址: sortable.js

1.安装插件

npm install sortablejs --save

2.vue页面中引入并注册

import Sortable from 'sortablejs'
export default {
    
    
		components: {
    
    
			Sortable
		},
}

3.使用方法

el-table要指定row-key属性,值必须是唯一值,可以取每一行的id

<el-table class="drag" highlight-current-row row-key="dataId" :data="tableData" :stripe="true" :border="true" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column align="center" type="selection" width="55">
			</el-table-column>
			<el-table-column align="center" prop="roleName" label="项目名称" :show-overflow-tooltip="true">
			</el-table-column>
			<el-table-column align="center" prop="roleDesc" label="排序号" :show-overflow-tooltip="true">
			</el-table-column>
			<el-table-column align="center" prop="createTime" label="创建时间" :show-overflow-tooltip="true">
			</el-table-column>
			<el-table-column align="center" prop="desc" label="项目描述" :show-overflow-tooltip="true">
			</el-table-column>
			// 可拖拽的区域
			<el-table-column align="center" label="拖拽排序"><i class="el-icon-rank handleDrag"></i></el-table-column>
</el-table>

mounted() {
    
    
			this.rowDrop()
},
methods: {
    
    
            //行拖拽
			rowDrop() {
    
    
				const tbody = document.querySelector('.el-table__body-wrapper tbody')
				const _this = this
				// Sortable的其他属性或方法使用可参考官方文档
				Sortable.create(tbody, {
    
    
					animation: 300,
					easing: "cubic-bezier(1, 0, 0, 1)",
					handle: ".drag /deep/.handleDrag", // handle控制拖拽的区域,CSS样式控制
					onEnd({
    
    
						newIndex,
						oldIndex
					}) {
    
    
						const currRow = _this.tableData.splice(oldIndex, 1)[0]
						console.log(currRow)
						_this.tableData.splice(newIndex, 0, currRow)
					}
				})
			},
},

<style>
	.drag /deep/.handleDrag {
    
    
		cursor: move;
		width: 100%;
		font-weight: 700;
		font-size: large;
		color: #3c3e45;
	}
</style>