vue+elementUI实现表格行拖拽到其它区域（无需插件）

最新推荐文章于 2025-09-28 09:37:13 发布

原创

最新推荐文章于 2025-09-28 09:37:13 发布 · 1.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

本文介绍了如何在ElementUI的表格组件中实现拖拽功能，通过row-class-name属性绑定唯一标识，为表格行设置可拖拽，并在dragstart和drop事件中处理数据传输和目标位置。

elementUI的表格组件没有拖拽事件，下面的代码可实现把表格行的内容拖拽到其它区域。

<template lang="html">
	<div class="drag-demo">
        <!-- 表格数据 -->
        <div class="table-data">
            <el-table :data="tableData" row-key="id" height="100%" ref="table" :row-class-name="rowClassName">
                <el-table-column prop="index" width="50" label="序号"></el-table-column>
                <el-table-column prop="date" label="日期"></el-table-column>
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="province" label="省份"></el-table-column