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 实现模态对话框 源代码大全
May 02 Javascript
JavaScript XML操作 封装类
Jul 01 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
javascript高级学习笔记整理
Aug 14 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
Nov 12 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
Vue.js的模板语法详解
Feb 16 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 Array交叉表实现代码
2010/08/05 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
分析javascript原型及原型链
2018/03/18 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
python通过shutil实现快速文件复制的方法
2015/03/14 Python
Python异常处理知识点总结
2019/02/18 Python
python opencv实现证件照换底功能
2019/08/19 Python
WxPython实现无边框界面
2019/11/18 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
PyQt5实现画布小程序
2020/05/30 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
《小儿垂钓》教学反思
2014/02/23 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
信息合作协议书
2014/10/09 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
2014年党委工作总结
2014/11/22 职场文书
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js
python图片灰度化处理的几种方法
2021/06/23 Python