利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序


Posted in Javascript onJune 07, 2019

Vue-draggable 的github传送门 :

https://github.com/SortableJS/Vue.Draggable

一. 下载依赖包:npm install vuedraggable -S 

二. 在需要使用的当前界面引入依赖,注册组件:

import draggable from "vuedraggable";
export default {
 components: {
 draggable,
 }

三. 在template 中建立表格,分别写出thead 部分不变, 此处需要将draggable 渲染成tbody,不然draggable会被解析成div 影响样式。

(渲染方法:<draggable v-model="tablelist" element="tbody">)

<table class="dataTabble">
 <thead>
 <tr>
  <th width="110">栏目名称</th>
  <th width="200">发布时间</th>
  <th width="160">公告数量</th>
  <th width="160">操作</th>
 </tr>
 </thead>
 <draggable v-model="tablelist" element="tbody" :move="getdata" @update="datadragEnd">
 <tr v-for="(item,id) in tablelist" :key="id">
  <td>{{item.name}}</td>
  <td>{{item.time}}</td>
  <td>{{item.num}}</td>
  <td>
  <div class="tabopa">
   <a @click="dialogFormVisible = true" style="cursor:pointer">添加</a>
   <a @click="open2">删除</a>
  </div>
  </td>
 </tr>
 </draggable>
</table>
<div class="zhu mt40">提示:拖动可对栏目进行排序</div>

此处data部分,通过{ {   } } 获取data中数据,实际中通过请求获取

data() {
 return {
 tablelist: [
  { id: 1, name: "活动消息1", time: "2018-08-25 14:54", num: "1000" },
  { id: 2, name: "公司消息2", time: "2018-08-25 14:54", num: "200" },
  { id: 3, name: "个人消息3", time: "2018-08-25 14:54", num: "30000" },
  { id: 4, name: "客户消息4", time: "2018-08-25 14:54", num: "40" }
 ],
 };
},

四.相关方法

获取拖动中和拖动结束时的id

methods: {
 //拖动中与拖动结束
 getdata(evt) {
  console.log(evt.draggedContext.element.id);
 },
 datadragEnd(evt) {
  console.log("拖动前的索引 :" + evt.oldIndex);
  console.log("拖动后的索引 :" + evt.newIndex);
  console.log(this.tags);
 },

 五.贴出全部代码

<template>
 <div>
 <!--main-->
   <table class="dataTabble">
    <thead>
    <tr>
     <th width="110">栏目名称</th>
     <th width="200">发布时间</th>
     <th width="160">公告数量</th>
     <th width="160">操作</th>
    </tr>
    </thead>
    <draggable v-model="tablelist" element="tbody" :move="getdata" @update="datadragEnd">
    <tr v-for="(item,id) in tablelist" :key="id">
     <td>{{item.name}}</td>
     <td>{{item.time}}</td>
     <td>{{item.num}}</td>
     <td>
     <div class="tabopa">
      <a @click="dialogFormVisible = true" style="cursor:pointer">添加</a>
      <a @click="open2">删除</a>
     </div>
     </td>
    </tr>
    </draggable>
   </table>
   <div class="zhu mt40">提示:拖动可对栏目进行排序</div>
 <!--main end-->
 </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
 components: {
 draggable,
 },
 data() {
 return {
  tablelist: [
  { id: 1, name: "活动消息1", time: "2018-08-25 14:54", num: "1000" },
  { id: 2, name: "公司消息2", time: "2018-08-25 14:54", num: "200" },
  { id: 3, name: "个人消息3", time: "2018-08-25 14:54", num: "30000" },
  { id: 4, name: "客户消息4", time: "2018-08-25 14:54", num: "40" }
  ],
 };
 },
 methods: {
 //拖动中与拖动结束
 getdata(evt) {
  console.log(evt.draggedContext.element.id);
 },
 datadragEnd(evt) {
  console.log("拖动前的索引 :" + evt.oldIndex);
  console.log("拖动后的索引 :" + evt.newIndex);
  console.log(this.tags);
 },
 }
}
</script>
<style>
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于js类的定义
Jun 28 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
浅谈Postman解决token传参的问题
Mar 31 Javascript
Vue不能观察到数组length的变化
Jun 08 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
Vue组件基础用法详解
Feb 05 Javascript
Vue中实现权限控制的方法示例
Jun 07 #Javascript
vue 父组件中调用子组件函数的方法
Jun 06 #Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 #Javascript
小试小程序云开发(小结)
Jun 06 #Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 #Javascript
微信小程序如何使用globalData的方法
Jun 06 #Javascript
详解微信小程序开发(项目从零开始)
Jun 06 #Javascript
You might like
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
php代码运行时间查看类代码分享
2011/08/06 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
php实现中文转数字
2016/02/18 PHP
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
js onload事件不起作用示例分析
2013/10/09 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
JQuery节点元素属性操作方法
2015/06/11 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
Python聚类算法之DBSACN实例分析
2015/11/20 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
使用pandas读取文件的实现
2019/07/31 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
某科技软件测试面试题
2013/05/19 面试题
校园公益广告语
2014/03/13 职场文书
2015年教师节感言
2015/08/03 职场文书
vue前端工程的搭建
2021/03/31 Vue.js