el-table实现行拖拽
vue想要实现拖拽 需要安装两个插件(1.vuedraggable;2.sortablejs)npm install vuedraggable;npm install sortablejs;<el-table :data="tableData" row-key="id"><el-table-column prop="id" label="ID"> </el-table
·
vue想要实现拖拽 需要安装两个插件(1.vuedraggable;2.sortablejs)
npm install vuedraggable;
npm install sortablejs;
<el-table :data="tableData" row-key="id">
<el-table-column prop="id" label="ID"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
</el-table>
import Sortable from "sortablejs";
created() {
this.$nextTick(() => {
this.drag();
});
},
drag() {
const el = document.querySelectorAll(
".el-table__body-wrapper > table > tbody"
)[0];
Sortable.create(el, {
disabled: false, // 拖拽不可用? false 启用
ghostClass: 'sortable-ghost', //拖拽样式
animation: 150, // 拖拽延时,效果更好看
onEnd: (e) => { // 拖拽结束时的触发
let arr = this.tableData; // 获取表数据
arr.splice(e.newIndex, 0, arr.splice(e.oldIndex, 1)[0]); // 数据处理,获取最新的表格数据
this.$nextTick(function () {
this.tableData= arr;
console.log(this.tableData)
})
},
});
},
经过这么久的学习,发现两个拖拽的用法差不多,项目中可根据实际需要运用拖拽
更多推荐
已为社区贡献1条内容
所有评论(0)