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 相关文章推荐
对象的类型:本地对象(1)
Dec 29 Javascript
Javascript 面向对象 命名空间
May 13 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
Node.js中的异步生成器与异步迭代详解
Jan 31 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 上传文件的方法(类)
2009/07/30 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
半角全角相互转换的js函数
2009/10/16 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
德国苹果商店:MacTrade
2020/05/18 全球购物
应届生学校辅导员求职信
2013/11/07 职场文书
技术学校毕业生求职信分享
2013/12/02 职场文书
趣味比赛活动方案
2014/02/15 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers