Vue3+element plus实现table拖拽排序(基于Sortablejs)

L.@

已于 2023-05-10 11:18:42 修改

阅读量1.4k

点赞数

文章标签： javascript vue.js 前端

于 2023-05-10 11:08:59 首次发布

本文链接：https://blog.csdn.net/weixin_43962877/article/details/130596079

版权

本文介绍如何在Vue3应用中结合Element Plus组件库，利用Sortablejs实现表格行的拖拽排序功能。

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

引入依赖 sortablejs

npm install sortablejs --save

2、引入sortablejs

import Sortable from 'sortablejs'

在shims-vue.d.ts文件中 加入   
declare module 'sortablejs'

<template>
  <el-drawer v-model="visible" @close = 'closeDrawer' :destroy-on-close="true" size="100%">
    <el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
              :data="dataForm.restApiJsonMapper"
              size="small"
              ref="dragTable"
              border>
      <el-table-column prop="jsonName"
                       label="源端字段名"
                       min-width="20%"></el-table-column>
      <el-table-column prop="columnName