Elementui表格组件+sortablejs实现行拖拽排序的示例代码


Posted in Javascript onAugust 28, 2019

前言

运营小姐姐说想要可以直接拖拽排序的功能,原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置,拖拽操作就很方便

效果

Elementui表格组件+sortablejs实现行拖拽排序的示例代码

实现方式

template部分

<el-table
 v-loading="loading"
 :default-sort="{prop: 'sortNum', order: 'ascending'}"
 :data="list"
 border
 align="left"
>
 <el-table-column
  show-overflow-tooltip
  v-for="(item, index) in col"
  :key="`col_${index}`"
  :prop="col[index].prop"
  :label="item.label"
 >
  <template slot-scope="scope">
   <p>{{scope.row[item.prop]}}</p> 
  </template>
 </el-table-column>
</el-table>

script部分

import Sortable from 'sortablejs'
export default {
 components: {
 Sortable
 },
 data() {
 return {
  col: [
  {
   label: '位置',
   prop: 'location'
  },
  {
   label: '序号',
   prop: 'sortNum'
  },
  {
   label: '经办人',
   prop: 'operator'
  },
  {
   label: '操作',
   prop: 'isClick'
  }
  ]
 }
 },
 mounted() {
 this.rowDrop()
 },
 methods: {
  rowDrop() {
  const tbody = document.querySelector('.el-table__body-wrapper tbody')
  const _this = this
  Sortable.create(tbody, {
   onEnd({ newIndex, oldIndex }) {
    const currRow = _this.list.splice(oldIndex, 1)[0]
    _this.list.splice(newIndex, 0, currRow)
    _this.list = _this.list.filter(({ adId }) => adId !== 0)
 
    _this.list.forEach((item, index) => {
     _this.sortString += item.adId + ':' + (index + 1) + ','
    })
    _this.sortString = _this.sortString.substr(0, _this.sortString.length - 1)
   }
  })
 }
 }
}

完成!你们可以看得懂的!你可以你能行!

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

Javascript 相关文章推荐
javascript中获取选中对象的类型
Apr 02 Javascript
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
Mar 22 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
Sep 14 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
JS中async/await实现异步调用的方法
Aug 28 #Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 #Javascript
详解用async/await来处理异步
Aug 28 #Javascript
vue中监听返回键问题
Aug 28 #Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 #Javascript
小程序中this.setData的使用和注意事项
Aug 28 #Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 #Javascript
You might like
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
JavaScript自定义事件介绍
2013/08/29 Javascript
JavaScript获取按钮所在form表单id的方法
2015/04/02 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
Python模块搜索路径代码详解
2018/01/29 Python
python3中zip()函数使用详解
2018/06/29 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
python调用摄像头拍摄数据集
2019/06/01 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
python实现翻译word表格小程序
2020/02/27 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
python实现图片转字符画的完整代码
2021/02/21 Python
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
师德师风自我评价范文
2014/09/11 职场文书
公司租房协议书范本
2014/10/08 职场文书
大学生毕业评语
2014/12/31 职场文书
中国世界遗产导游词
2015/02/13 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS