vue实现前端列表拖拽功能
更新时间：2023年12月19日 14:57:18 作者：我是Superman丶
这篇文章主要为大家详细介绍了如何利用vue实现前端列表拖拽功能,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下
使用组件
yarn add sortablejs --save
Sortable.js中文网 (sortablejs.com)
以下代码只是举个例子， 大家可以举一反三去实现各自的业务功能
<template>
<div>
<el-button type="primary" @click="切换列表(1)">列表一</el-button>
<el-button type="success" @click="切换列表(2)">列表二</el-button>
<el-table
v-if="DataListShow === 1"
:data="DataList1"
ref="refTable1"
class="ELtable"
size="small"
stripe
:key="tableKey1"
:row-key="
(row) => {
return row.prop;
}
"
>
<el-table-column
label="编码"
align="center"
prop="label"
></el-table-column>
<el-table-column
label="名称"
align="center"
prop="label"
></el-table-column>
</el-table>
<el-table
v-if="DataListShow === 2"
:data="DataList2"
ref="refTable2"
class="ELtable"
size="small"
stripe
:key="tableKey2"
:row-key="
(row) => {
return row.prop;
}
"
>
<el-table-column
label="编码"
align="center"
prop="prop"
></el-table-column>
<el-table-column
label="名称"
align="center"
prop="label"
></el-table-column>
</el-table>
</div>
</template>
<script>
// 引入Sortable表格拖拽插件
import Sortable from "sortablejs";
//引入模拟的data数据
import DataList1 from "./DataList1.js";
import DataList2 from "./DataList2.js";
export default {
name: 'HelloWorld',
data(){
return {
DataListShow:1,
//第1个表格的配置
tableKey1:0,
DataList1:DataList1,
//第2个表格的配置
tableKey2:0,
DataList2:DataList2,
}
},
mounted() {
//开始 行拖拽
this.rowDrop1();
},
methods:{
切换列表(列表号){
this.DataListShow = 列表号
this.$nextTick(() => {
if(列表号 === 1){
//启动列表一拖拽
this.rowDrop1();
}else{
//启动列表二拖拽
this.rowDrop2();
}
});
},
/**
* 第一个表格的
* 行拖拽
*/
rowDrop1() {
window.aaa = this
const _this = this;
const wrapperTr = this.$refs.refTable1.$el.querySelector(".el-table__body-wrapper tbody");
this.sortable = Sortable.create(wrapperTr, {
handle:'.el-table__row',
animation: 350,
delay: 0,
easing:'cubic-bezier(0.34, 1.56, 0.64, 1)',
onEnd: (evt) => {
const oldItem = _this.DataList1[evt.oldIndex];
_this.DataList1.splice(evt.oldIndex, 1);
_this.DataList1.splice(evt.newIndex, 0, oldItem);
_this.reDrawTable1();
// 每一次拖拽后都要重绘一次
},
});
},
/**
* 第一个表格的
* 触发表格重绘
*/
reDrawTable1() {
this.tableKey1 = Math.random();
this.$nextTick(() => {
// this.rowDrop();
this.rowDrop1();
});
},
/**
* 第二个表格的
* 行拖拽
*/
rowDrop2() {
const _this = this;
// console.log("数据", this.schemas);
const wrapperTr = this.$refs.refTable2.$el.querySelector(".el-table__body-wrapper tbody");
this.sortable = Sortable.create(wrapperTr, {
handle:'.el-table__row',
animation: 350,
delay: 0,
easing:'cubic-bezier(0.34, 1.56, 0.64, 1)',
onEnd: (evt) => {
const oldItem = _this.DataList2[evt.oldIndex];
_this.DataList2.splice(evt.oldIndex, 1);
_this.DataList2.splice(evt.newIndex, 0, oldItem);
_this.reDrawTable2();
// 每一次拖拽后都要重绘一次
},
});
},
/**
* 第二个表格的
* 触发表格重绘
*/
reDrawTable2() {
this.tableKey2 = Math.random();
this.$nextTick(() => {
// this.rowDrop();
this.rowDrop2();
});
},
}
}
</script>DataList1.js
export default [
{
disabled: true,
isCheck: true,
fixed:true,
width: "100px",
label: "姓名",
prop: "name"
},
{
disabled: false,
isCheck: true,
width: "180px",
label: "单位",
prop: "unitName"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "部门",
prop: "departmentName"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "性别",
prop: "sex"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "出生年月",
prop: "birthday"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "籍贯",
prop: "places"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "参加工作时间",
prop: "workTime"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "行政职务",
prop: "duty"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "行政职务时间",
prop: "dutyTime"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "行政职级",
prop: "jobGrade"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "行政职级时间",
prop: "jobGradeTime"
},
{
disabled: false,
isCheck: true,
width: "110px",
label: "等级",
prop: "rank"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "等级时间",
prop: "rankTime"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "法律职务",
prop: "legislation"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "法律职务时间",
prop: "legislationTime"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "全日制学历",
prop: "fullTimeEducation"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "全日制学位",
prop: "fullTimeDegree"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "全日制专业",
prop: "fullTimeMajor"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "政治面貌",
prop: "politicsStatus"
},
];DataList2.js
export default [
{
disabled: true,
isCheck: true,
fixed:true,
width: "100px",
label: "还是",
prop: "name"
},
{
disabled: false,
isCheck: true,
width: "180px",
label: "撒大哥",
prop: "unitName"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "官方",
prop: "departmentName"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "体育",
prop: "sex"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "精明能干",
prop: "birthday"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "可以广泛",
prop: "places"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "发公告",
prop: "workTime"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "人同意",
prop: "duty"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "大幅度发给",
prop: "dutyTime"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "就发过火",
prop: "jobGrade"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "try二食堂",
prop: "jobGradeTime"
},
{
disabled: false,
isCheck: true,
width: "110px",
label: "结果",
prop: "rank"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "分班表",
prop: "rankTime"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "沃尔沃二",
prop: "legislation"
},
{
disabled: false,
isCheck: true,
width: "140px",
label: "就体育与",
prop: "legislationTime"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "消防管道发给",
prop: "fullTimeEducation"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "宣传部成本",
prop: "fullTimeDegree"
},
{
disabled: false,
isCheck: true,
width: "80px",
label: "明白你们帮你们",
prop: "fullTimeMajor"
},
{
disabled: false,
isCheck: true,
width: "100px",
label: "大概的电饭锅电饭锅",
prop: "politicsStatus"
},
];以上就是vue实现前端列表拖拽功能的详细内容，更多关于vue列表拖拽的资料请关注脚本之家其它相关文章！
相关文章
vue-router3.x和vue-router4.x相互影响的问题分析
这篇文章主要介绍了vue-router3.x和vue-router4.x相互影响的问题分析,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
Vue中使用vue-count-to(数字滚动插件)详细教程
这篇文章主要给大家介绍了关于Vue中使用vue-count-to(数字滚动插件)的相关资料,最近需要开发一个数字滚动效果,在网上找到一个关于vue-countTo的插件,觉得这个插件还不错,需要的朋友可以参考下2023-09-09
在 Vue 3 中实现微信扫码登录,涉及到前端生成二维码、监听微信回调以及与后端的交互,本文给大家介绍了一个详细的实现步骤和代码示例,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-07-07
这篇文章主要给大家介绍了关于如何使用vuex实现兄弟组件通信的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
这篇文章主要介绍了Vue中transition的使用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了VSCode搭建Vue项目的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
Vue使用v-model封装el-pagination组件的全过程
通过封装el-pagination组件开发自定义分页组件的类似文章网上已经有很多了，但看了一圈，总是不如意，于是决定还是自己动手搞一个，对v-model封装el-pagination组件相关知识感兴趣的朋友一起看看吧2021-07-07
这篇文章主要介绍了 详解在vue使用weixin-js-sdk常见使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
这篇文章主要为大家详细介绍了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
本篇文章主要介绍了浅谈Vuejs中nextTick()异步更新队列源码解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
最新评论