#Vue 表单拖拽

1import Sortable from "sortablejs";

1// 引入排序插件
2import Sortable from "sortablejs";
3
4export default {
5	name: "DragTable",
6	data() {
7		return {
8			sortable: null /* 表单拖拽 */,
9			dragList: [
10				{
11					id: 1,
12					name: "张三",
13					sex: 1
14				},
15				{
16					id: 2,
17					name: "李四",
18					sex: 0
19				},
20				{
21					id: 3,
22					name: "王五",
23					sex: 0
24				},
25				{
26					id: 4,
27					name: "赵六",
28					sex: 1
29				}
30			]
31		};
32	},
33	mounted() {
34		// 等待数据渲染完成再加初始化拖拽表单
35		this.$nextTick(() => {
36			this.initSortTable();
37		});
38	},
39	methods: {
40		// 移除数据
41		delItem(index) {
42			this.dragList.splice(index, 1);
43		},
44		// 初始化拖拽表单
45		initSortTable() {
46			// const elTag = this.$refs['dragTable'].$el.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
47
48			// 获取 el-table
49			const tableTag = this.$refs["dragTable"].$el;
50
51			// 获取 tbody 节点
52			const elTbody = tableTag.querySelectorAll(".el-table__body-wrapper > table > tbody")[0];
53			// 拖拽排序
54			this.sortable = Sortable.create(elTbody, {
55				onEnd: evt => {
56					const tempIndex = this.dragList.splice(evt.oldIndex, 1)[0];
57					this.dragList.splice(evt.newIndex, 0, tempIndex);
58				}
59			});
60		}
61	}
62};