Element ui表格组件+sortablejs实现行拖拽排序

前言

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

效果

实现方式

template部分


    
        
    

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')
         Sortable.create(tbody)
    }
  }
}

github项目地址
下载下来就可以查看了
呜呜呜呜给我点个start吧

完成!你们可以看得懂的!你可以你能行!

你可能感兴趣的:(javascript,vue.js,element-ui)