el-table 实现行可拖拽

安装

npm install vuedraggable;
npm install sortablejs;

结构

<el-table :data="tableData"
		  height="100%"
		  ref="tableRef"
		  tooltip-effect="light"
		  @selection-change="handleSelectionChange"
		  :row-key="getRowKeys">
</el-table>

引入

import Sortable from 'sortablejs'

数据

	tableData: [],

调用

	mounted() {
			this.rowDrop()
		},

方法

            getRowKeys(row) {
				return row.id
			},	      
            rowDrop() {
				this.$nextTick(() => {
					const tbody = document.querySelector(
						' .el-table__body-wrapper tbody'
					)
					this.sortable = Sortable.create(tbody, {
						onEnd: ({ newIndex, oldIndex }) => {
							this.tableData.splice(
								newIndex,
								0,
								this.tableData.splice(oldIndex, 1)[0]
							)
							var newArray = this.tableData.slice(0)
							this.tableData = []
							this.$nextTick(function () {
								this.tableData = newArray
								this.updateList()
							})
						}
					})
				})
			},
			updateList() {
				let ids = this.tableData.map((item) => item.id)
                // 调用排序接口
				goodsEditSort({ ids: ids }).then((res) => {
					if (res.errno != 0) {
						this.getList()
					}
				})
			}