el-table(Sortable)简单实现拖动排序(亲测有效)
1、template组件,这里需要注意2点,ref="dragTable"和row-key="id"
<template>
<el-table :data="list" ref="dragTable" highlight-current-row row-key="id">
<el-table-column label="id" width="60" prop="id"></el-table-column>
<el-table-column label="name" prop="name"></el-table-column>
<el-table-column label="school" prop="school"></el-table-column>
<el-table-column label="age" prop="age"></el-table-column>
<el-table-column label="sex" prop="sex"></el-table-column>
</el-table>
</template>
2、script可以之间复制使用
import Sortable from "sortablejs";
export default {
data() {
return {
list: [
{ id: 1, name: "张富贵", school: "西瓜南大学", age: "22", sex: "不知", sort:1 },
{ id: 2, name: "李德华", school: "西瓜南大学", age: "22", sex: "不知", sort:2 },
{ id: 3, name: "董小明", school: "西瓜南大学", age: "22", sex: "不知", sort:3 }
],
oldId: "",
newsId: ""
};
},
mounted() {
this.setSort();
},
methods: {
setSort() {
const el = this.$refs.dragTable.$el.querySelectorAll(
".el-table__body-wrapper > table > tbody"
)[0];
this.sortable = Sortable.create(el, {
ghostClass: "sortable-ghost",
setData: function(dataTransfer) {
dataTransfer.setData("Text", "");
},
onEnd: evt => {
const targetRow = this.list.splice(evt.oldIndex, 1)[0];
this.list.splice(evt.newIndex, 0, targetRow);
console.log("原来位置", targetRow.sort);
console.log("现在位置", evt.newIndex + 1); //这是当前页面位置,如果是分页需要自己改一下
}
});
}
}
};
以上是编程学习网小编为您介绍的“el-table(Sortable)简单实现拖动排序(亲测有效)”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:el-table(Sortable)简单实现拖动排序(亲测有效)
基础教程推荐
猜你喜欢
- JavaScript SHA512&SHA256加密算法详解 2024-01-07
- jquery实现漂浮在网页右侧的qq在线客服插件示例 2024-01-21
- HTML5在线预览PDF的示例代码 2022-09-16
- CSS的expression使用简介 2022-10-16
- Ajax工作原理及优缺点实例解析 2023-02-23
- Ajax+php实现商品分类三级联动 2023-01-20
- express框架通过ejs模板渲染输出页面实例分析 2023-07-09
- VuePress 2023-10-08
- p5.js实现故宫橘猫赏秋图动画 2023-12-02
- Ajax请求超时与网络异常处理图文详解 2023-02-23