vue vxe-tabel表格拖拽排序

效果：

 这个表格虽然是带可展开功能但是二级表格是无法进行排序的（公司无此需求）

实现过程：

下载插件：

  npm install sortablejs --save

引入：

 import Sortable from 'sortablejs'

插件地址：

拖拽插件：

sortable.js中文文档 - itxst.com

表格插件：

vxe-table v4

代码片段：

html：

 /*表格配置根据个人需求添加 但是ref必须添加*/
<vxe-table :row-key="uuid"  ref="edTable" 
                :data="edit_list">
                <vxe-table-column field="cost" title="成本单价" min-width="80" align="center"></vxe-table-column>
                <vxe-table-column field="ot_price" title="市场单价" min-width="80" align="center"></vxe-table-column>
                <vxe-table-column field="sales" title="销量" min-width="80" align="center"></vxe-table-column>
                <vxe-table-column field="stock" title="库存" min-width="80" align="center"></vxe-table-column>
                <vxe-table-column field="sort" title="排序" min-width="80" tooltip="true" align="center">
                </vxe-table-column>
              </vxe-table>

js：

​
    rowDrop() {
      this.$nextTick(() => {
        const Tbody = this.$refs.edTable
        const _this = this
        Sortable.create(Tbody.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
         //拖拽结束后执行的方法  _this.edit_list是表格数据
          onEnd({ newIndex, oldIndex }) {
          //这些代码根据个人需求添加
            const oldId=_this.edit_list[newIndex].id
            const obj=_this.edit_list[newIndex]
            obj.id=_this.edit_list[oldIndex].id
            const obj1=_this.edit_list[oldIndex]
            obj1.id=oldId
          //这是正常排序需求的代码
            const currRow = _this.edit_list.splice(oldIndex, 1)[0]
            _this.edit_list.splice(newIndex, 0, currRow)

          //处理请求接口数据
            let arr =[]
            _this.edit_list.forEach((el) => {
             arr.push({
                  id:el.id,
                  sort:el.sort
                })
            })
            _this.formadd.detail_list=arr
            //请求接口
            planDetailsSort(_this.formadd).then((err)=>{
                _this.$Message.success("排序成功")
            })
          }
        })
      })
    },

​