vue + element-ui는 sortable.js를 사용하여 el-table 행 드래그 정렬 기능을 구현합니다.

이 기능은 Sortable.js를 사용하여 중국어 URL을 구현합니다. 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>