技術標籤：vue.jsvuejavascript前端

element-ui 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>