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 相关文章推荐
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
使用js 设置url参数
Jul 08 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
JavaScript中Dom操作实例详解
Jul 08 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与javascript的两种交互方式
2006/10/09 PHP
别了 JavaScript中的isXX系列
2012/08/01 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
vue中的scope使用详解
2017/10/29 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
python通过加号运算符操作列表的方法
2015/07/28 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
python创建n行m列数组示例
2019/12/02 Python
python机器学习库xgboost的使用
2020/01/20 Python
Python插件机制实现详解
2020/05/04 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
构造器Constructor是否可被override?
2013/08/06 面试题
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
出国留学自荐信
2013/10/25 职场文书
岗位明星事迹材料
2014/05/18 职场文书
优秀班组长事迹
2014/05/31 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
不同意离婚答辩状
2015/05/22 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
Python django中如何使用restful框架
2021/06/23 Python