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 flex 布局实现div均分自动换行,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
这篇文章介绍了VUE中v-if与v-show的区别，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-03-03
在用vite创建vue3项目时已经选择了添加ESLint,本文就来介绍一下ESLint在项目中需要怎样配置和使用,具有一定的参考价值,感兴趣的可以了解一下2023-09-09
这篇文章主要介绍了如何解决模块““vue“”没有导出的成员“ref”问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
这篇文章主要介绍了vue之父组件向子组件传值并改变子组件的样式,需要的朋友可以参考下2022-12-12
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
这篇文章主要介绍了vue 动态组件(component :is) 和 dom元素限制(is)用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
本文主要介绍了vue element封装form表单的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
ref和reactive是Vue3中用来实现数据响应式的API,一般情况下,ref定义基本数据类型,reactive定义引用数据类型,本文给大家介绍Vue3 的ref和reactive的用法和区别,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要给大家介绍了关于vue将某个组件打包成js并在其他项目使用的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
本文为大家介绍了VUE中内置指令包括：v-text,v-html,v-show,v-if,v-else,v-else-if,v-for,v-on,v-bind,v-model,v-pre,v-cloak,v-once2019-02-02
最新评论