大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

Elementui表格组件+sortablejs怎么实现行拖拽排序

这篇文章给大家分享的是有关Elementui表格组件+sortablejs怎么实现行拖拽排序的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

成都创新互联公司长期为上千余家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为灵台企业提供专业的网站建设、成都做网站灵台网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。

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

效果

Elementui表格组件+sortablejs怎么实现行拖拽排序

实现方式

template部分


 
  
   

{{scope.row[item.prop]}}

      

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)
   }
  })
 }
 }
}

感谢各位的阅读!关于“Elementui表格组件+sortablejs怎么实现行拖拽排序”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


当前题目:Elementui表格组件+sortablejs怎么实现行拖拽排序
URL标题:http://dzwzjz.com/article/pehici.html
在线咨询
服务热线
服务热线:028-86922220
TOP