vue利用sortablejs实现表格的拖拽排序

最新推荐文章于 2025-11-17 09:41:30 发布

原创

最新推荐文章于 2025-11-17 09:41:30 发布 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

本文介绍了如何在Vue项目中实现表格的拖拽排序功能，同时确保标记为电子凭证的行始终位于底部。通过设置表格行的class并利用Sortable库进行拖拽排序操作，结合onStart、onEnd和onMove事件处理拖动过程，实现了动态调整表格数据顺序。在拖拽过程中，还特别处理了不可拖动的行，确保了用户体验。

最近遇到一个需求，vue项目中的表现需要拖拽排序，并且表格中标为电子凭证的行是默认排在最底部，其他数据可以拖拽排序。
在这里插入图片描述
表格html

<cm-table
     ref="scanned-table"
     class="table-header-sty scanned-table"
     :data="tableList"
     border
     highlight-current-row
     current-row-key="id"
     :row-class-name="tableRowClassName"
     v-loading.lock="loading">
      <cm-table-column label="序号" align="center" width="80">
        <template slot-scope="scope">
          <span>{
  
  {scope.row[isElectronicProp] === 'Y' ? '' : scope.row['serialNum']}}</span>
        </template>
      </cm-table-column>
      <template v-for="(item, index) in tableHeader">
        <template v-if="item.label === '是否为电子凭证'">
          <cm-table-column :label="item.label" align="center" :key="index">
            <template slot-scope="scope">
              <span>{