vue利用sortablejs扩展行实现拖拽

扩展行也类似于属性结构，内外都实现拖拽排序的话，利用sortablejs

首先安装sortablejs

npm install sortablejs --save

在所需页面引入

import Sortable from 'sortablejs'

eltable数据

<el-table ref="reqTable" row-key="seqNo" :data="fieldList" :row-class-name="getRowClass" 
    style="width: 100%" class="myTable" @expand-change="expandChange">
   <el-table-column type="index" label="序号" width="50" align="center"></el- table-column>
   <el-table-column type="expand" width="30px">
     <template slot-scope="scope">
       <el-table :data="scope.row.sonFieldList" style="width:100%" ref="reqSon">
         <el-table-column type="index" label="序号" width="50" align="center" show- 
          overflow-tooltip></el-table-column>
         <el-table-column label="姓名" align="center" min-width="100" prop="name" show- 
          overflow-tooltip></el-table-column>
         <el-table-column label="年龄" align="center" min-width="100" prop="age" show- 
           overflow-tooltip></el-table-column>
         <el-table-column label="操作" align="center" min-width="50">
           <template slot-scope="{}">
              <span class="drag-btn">
                 <i class="el-icon-rank"></i>
              </span>
           </template>
         </el-table-column>
       </el-table>
     </template>
   </el-table-column>
   <el-table-column label="操作" align="center" min-width="50">
     <template slot-scope="{}">
       <span class="drag-btnFa">
         <i class="el-icon-rank"></i>
       </span>
     </template>
    </el-table-column>
<el-table>

外层拖拽

 methods: {
 // 拖拽
    rowDrop() {
      const el = this.$refs.reqTable.$el.querySelectorAll('.el-table__body-wrapper > table 
      > tbody')[0]
      this.sortable = Sortable.create(el, {
        animation: 300,
        handle: '.drag-btnFa',
        onEnd: evt => {
          const targetRow = this.fieldList.splice(evt.oldIndex, 1)[0]
          this.fieldList.splice(evt.newIndex, 0, targetRow)
          // 将数组进行深拷贝，置空后重新赋值给数组
          let newArr = this.fieldList.splice(0)
          this.fieldList = []
          this.$nextTick(() => {
            this.fieldList = newArr
          })
        }
      })
    }
  }

初始化

created() {
    this.rowDrop()
  },

内层拖拽，添加了展开行的方法

 methods: {
    expandChange(row, expand) {
      if (expand.length > 0) {
        setTimeout(() => {
          const el = this.$refs.reqSon.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
          this.sortable = Sortable.create(el, {
            animation: 300,
            handle: '.drag-btn',
            onEnd: evt => {
              const targetRow = this.fieldList[0].sonFieldList.splice(evt.oldIndex, 1)[0]
              this.fieldList[0].sonFieldList.splice(evt.newIndex, 0, targetRow)
              // 将数组进行深拷贝，置空后重新赋值给数组
              let newArr = this.fieldList[0].sonFieldList.splice(0)
              this.fieldList[0].sonFieldList= []
              this.$nextTick(() => {
                this.fieldList[0].sonFieldList= newArr
              })
            }
          })
        }, 500)
      }
    },
}