利用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 相关文章推荐
共享自己写一个框架DreamScript
Jan 20 Javascript
javascript 子窗体父窗体相互传值方法
May 31 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
vue.js实例todoList项目
Jul 07 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 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数据库配置文件一般做法分享
2012/07/07 PHP
JavaScript中的集合及效率
2010/01/08 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
Python实现拼接多张图片的方法
2014/12/01 Python
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
Python中的choice()方法使用详解
2015/05/15 Python
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
python线程中同步锁详解
2018/04/27 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
python提取xml里面的链接源码详解
2019/10/15 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
人事部经理岗位职责
2014/03/07 职场文书
银行求职信怎么写
2014/05/26 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
启动仪式策划方案
2014/06/14 职场文书
开服装店计划书
2014/08/15 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
开场白怎么写
2015/06/01 职场文书
无线电知识基础入门篇
2022/02/18 无线电