vue3:使用sortablejs实现表格拖拽移动（修改拖拽样式）

最新推荐文章于 2025-04-07 08:00:00 发布

一个前端女子

最新推荐文章于 2025-04-07 08:00:00 发布

阅读量6.1k

点赞数 2

分类专栏： vue3 文章标签： elementui vue.js

本文链接：https://blog.youkuaiyun.com/qq_44173499/article/details/124802732

版权

本文介绍了如何在 Vue3 项目中结合 element-ui 库，利用 sortablejs 库实现表格行的拖拽移动功能，并详细讲解了如何自定义拖拽过程中的样式，为用户提供更友好的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div class="app-container home">
    <el-table
      class="t1"
      ref="dragTable"
      :data="tableData"
      row-key="id"
      border
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
            <el-button class="move" type="text" size="small">拖 拽</el-button>    
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>