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列表拖拽的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vuejs简单验证码功能,结合完整实例形式分析了vue.js验证码的生成、显示、校验等相关操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了Vue elementui字体图标显示问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-08-08
今天小编就为大家分享一篇vue 实现购物车总价计算，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vue使用技巧及vue项目中遇到的问题,本文给大家带来的只是一部分，后续还会持续更新，感兴趣的朋友跟随脚本之家小编一起学习吧2018-06-06
这篇文章主要介绍了如何在vue中使用ant-design-vue组件,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue()开始就是vue生命周期的开始。Vue实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom->渲染、更新->渲染、卸载等⼀系列过程,称这是Vue的⽣命周期2022-10-10
这篇文章主要为大家详细介绍了vue使用拖拽方式创建结构树，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了vue如何实现级联选择器功能问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
在vue项目中(本地)使用iconfont字体图标的三种方式总结
这篇文章主要介绍了在vue项目中(本地)使用iconfont字体图标的三种方式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了VUE elTree无子级隐藏展开图标方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
最新评论