elementui树形拖拽排序-Elementui表格组件+sortablejs示例代码实现行拖拽排序

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

本文主要介绍Elementui表格组件+sortablejs实现行拖拽排序。 文章通过示例代码对其进行了详细介绍。 对您的学习或工作有一定的参考学习价值。 有需要的同事就关注下面小编吧。 我们一起来学习一下

前言

操作小姑娘说elementui树形拖拽排序，她想要一个可以直接拖拽排序的功能。 原本在序号6的广告可能会因为赞助商父亲加钱而被移到序号1的位置。 拖放操作非常方便。

疗效

执行

模板部分

<el-table
 v-lowww.cppcns.comading="loading"
 :default-sort="{prop: 'sortNum', order: 'ascending'}"
 :data="list"
 border
 align="left"
>
 
  
   
{{scope.row[item.prop]}}
 
  
 

脚本部分

import Sortable from 'sortablejs'
export default {
 components: {
 Sortable
 },
 data() {
 return {
  col: [
  {
   label: '位置',
   prop: 'location'
  },
  {
   label: '序号',
   prop: 'sortNum'
  },
  {
   label: '经办人',
  js prop: 'operator'
  },
  {
   label: '操作',
   prop: 'isClick'
  }
  ]
 }
 },
 mounted() {
 this.rowww.cppcns.comwDrop()
 },
 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((www.cppcns.com{ adId }) => adId !== 0)
 
    _tjshis.list.forEach((item, index) => {
     _this.sortString += item.adId + ':' + (index + 1) + ','
    })
    _this.sortString = _this.sortString.substr(0, _this.sortString.length - 1)
   }
  })
 }
 }
}

结束！ 大家都能理解吧！ 你可以的elementui树形拖拽排序，你可以的！

以上就是本文的全部内容。 希望对您的学习有所帮助，也希望您支持我们。

本文标题：Elementui表格组件+sortablejs实现行拖拽排序示例代码