[JavaScript知识库] sortablejs拖拽排序

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> sortablejs拖拽排序 -> 正文阅读

[JavaScript知识库]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)
     }
})