elementUI的table使用Sortable进行拖拽并保存

最新推荐文章于 2024-08-14 11:41:25 发布

乐语_miss

最新推荐文章于 2024-08-14 11:41:25 发布

阅读量1.3k

点赞数 1

分类专栏： sortable element UI 文章标签： vue

本文链接：https://blog.csdn.net/weixin_49521721/article/details/113385652

版权

本文介绍了如何在Vue项目中利用Sortable.js实现ElementUI表格的拖拽排序功能，包括Sortable的安装、使用方法及具体实例，以满足产品需求中的列表排序和置顶操作。同时，鼓励读者交流优化方案。

摘要由CSDN通过智能技术生成

前言

背景：近期有产品需求，需要表格可以拖拽来实现列表排序的功能，并且列表任一项可以置顶，置顶永远在最上面且置顶和非置顶不能交叉，记录以下

一、安装Sortable

sortable.js中文文档

npm install sortable.js --save
//或者
npm i -S vuedraggable

说明：vuedraggable依赖 Sortable.js，所以安装了vuedraggable，我们便可以直接引入Sortable使用Sortable的特性。vuedraggable是Sortable一种加强，实现组件化的思想，可以结合Vue，使用起来会更方便

二、使用Sortable

import Sortable from 'sortablejs'

准备工作到此结束，开始垒码

三、实例

<el-table
  size="mini"
   ref="multipleTable"
   :data="tableData"
   empty-text=" "
   row-key="id"
   :key="sortKey"
   fit
   @row-click="changeCommodity"
   @sort-change="handleSortChange"
   @selection-change="handleSelectionChange"
 >
    <el-table-column align="center" label="排序" width="80">
       <template slot-scope="{}">
         <el-popover
           style="opacity: 0.6"
           placement="top-start"
           width="200"
           trigger="hover"
           content="拖拽排序"
         >
           <el-button slot="reference" style="border: none"
             ><p class="iconfont qt-acp-drag" style="color:#333"></p
           ></el-button>
         </el-popover>
       </template>
     </el-table-column>
     <el-table-column label="商品信息" min-width="260">
       <template slot-scope="scope">
         <div class="goods-inner-item">
           <div class="goods-inner-item__left">
             <div class