vue+element+sortablejs实现拖拽功能
Posted fengshaopu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue+element+sortablejs实现拖拽功能相关的知识,希望对你有一定的参考价值。
分为几部分:
第一:下载sortablejs插件
第二在文件内部导入sortablejs插件
第三进行配置使用
第四效果图展示
第一:下载sortablejs插件
npm:
npm install sortablejs --save
yarn:
yarninstall sortablejs --save
cnpm:
cnpm install sortablejs --save
第二在文件内部导入sortablejs插件
import Sortablejs from ‘sortablejs’
第三进行配置使用
这里我用的是element的table
这部分是上面部分html
<template>
<div>
<el-table :data="tableData" style="width: 100%" class="t1">
<el-table-column prop="date" label="日期" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</div>
</template>
这部分是script
<script>
import Sortable from 'sortablejs';
export default
data()
return
tableData: [
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
,
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
,
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
,
date: "2016-05-07",
name: "王y虎",
address: "上海市普陀区金沙江路 1516 弄",
,
date: "2016-05-08",
name: "王q虎",
address: "上海市普陀区金沙江路 1516 弄",
,
date: "2016-05-09",
name: "王小p",
address: "上海市普陀区金沙江路 1516 弄",
,
],
;
,
mounted()
this.rowDrop() //在这里调用
,
methods:
rowDrop ()
const tbody = document.querySelector('.el-table__body tbody')
Sortable.create(tbody,
disabled: false, // 是否开启拖拽
ghostClass: 'sortable-ghost', //拖拽样式
animation: 150, // 拖拽延时,效果更好看
group: // 是否开启跨表拖拽
pull: false,
put: false
,
onEnd: (e) => // 这里主要进行数据的处理,拖拽实际并不会改变绑定数据的顺序,这里需要自己做数据的顺序更改
let arr = this.tableData; // 获取表数据
arr.splice(e.newIndex, 0, arr.splice(e.oldIndex, 1)[0]); // 数据处理
this.$nextTick(function ()
this.tableData= arr;
);
);
,
;
</script>
<style scoped>
/deep/.sortable-ghost
opacity: 0.4;
background: #00a7d0;
</style>
第四效果图展示
20220518_155424
以上是关于vue+element+sortablejs实现拖拽功能的主要内容,如果未能解决你的问题,请参考以下文章