vue中实现表格内容拖拽进行自定义排序

最新推荐文章于 2024-09-17 17:22:45 发布

ghl-Dragon

最新推荐文章于 2024-09-17 17:22:45 发布

阅读量1.9k

点赞数 1

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/g1437353759/article/details/120670078

版权

本文介绍如何在Vue项目中利用sortablejs库实现表格数据的拖动排序功能，包括实现过程和关键参数设置，帮助读者理解如何将这一交互效果应用于实际项目。

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

先看效果：
请添加图片描述
需求是在列表数据加载出来之后，页面可以对数据进行拖动排序并进行保存

<vxe-table 
		:data.sync="tableData"    // 绑定返回的数据
		ref="paySlipTable"
        id="paySlipTable"
        row-key
        class="sortable-row-demo"
        :scroll-y="{ enabled: false }"
        @ciic-data-refresh="getTableData()">   // 获取表格数据的方法
    <vxe-table-column align="center" type="seq" width="60" title="序号"></vxe-table-column>
    <vxe-table-column width="60">
    <template #default>
        <span class="drag-btn">
        <i class="vxe-icon--menu"></i>
        </span>
    </template>
    <template #header>
        <el-tooltip
        v-model="showHelpTip1"