sortablejs拖拽排序

element ui 在el-table上添加拖拽

安装 npm i --save sortablejs

<el-table :data="fieldInformation" size="small" align="center" id="sortTable" row-key="columnNumber">
   <el-table-column
       :label="列数"
       align="center"
       prop="columnNumber"
     ></el-table-column>
     <el-table-column
       :label="$t('Operation')"
       align="center"
     >
       <template slot-scope="scope">
         <div class="handle">
           <i class="el-icon-d-caret" :title="$t('Drag up and down to sort')"></i>
         </div>
       </template>
     </el-table-column>
</el-table>

import Sortable from 'sortablejs'
  
const el = document.getElementById('sortTable').childNodes[2].childNodes[0].childNodes[1]
 this.sortable = Sortable.create(el, {
    handle: 'i.el-icon-d-caret',
     onEnd: evt => {
       const targetRow = this.fieldInformation.splice(evt.oldIndex, 1)[0]
       this.fieldInformation.splice(evt.newIndex, 0, targetRow)
     }
})