element+vue 表格行拖拽功能

解决方案

使用 sortable.js

步骤一: 安装

复制代码
npm install vuedraggable

步骤二:引入

bash 复制代码
import Sortable from 'sortablejs';

步骤三: el-table 添加row-key属性,外层包一层 sortableDiv

bash 复制代码
<div class="sortableDiv">   拖拽的盒子名字sortableDiv
<el-table
  ref="filterTable"
  row-key="ip" 
  :data="resourceList" 
  >
  <el-table-column
    prop="name"
    label="主机名" 
    :min-width="150" 
    show-overflow-tooltip>
  </el-table-column>
 </el-table>

实例:

下图的重点: 1.el-table 添加row-key属性,2.外层包一层 sortableDiv, 3.图标drag-icon

步骤四 : 将拖拽元素设置为要拖动项的父级元素

看完整的demo示例:

bash 复制代码
--------------------------  html  --------------------------
<div class="sortableDiv">   1.拖拽的盒子名字sortableDiv
<el-table
  ref="filterTable"
  row-key="id"  
  :data="planData" 
  v-loading="resourceListLoading" 
  >
   <el-table-column align="center" label="移入可拖拽(仅支持手工)" width="110px">
     <template slot-scope="{row, $index}">
        <i title="拖拽行数据" class="co-icon-move-solid drag-icon" />
        <span>名字</span>
     </template>
    </el-table-column>
    <el-table-column prop="name" align="center" label="计划名称"></el-table-column>
 </el-table>
 </div>
--------------------------  method  --------------------------
import Sortable from 'sortablejs';
行拖拽
mounted() {
    this.rowDrop()
  },
 // 下面是 methods
rowDrop() {
     // 获取tbody 第一种
      const tbody = document.querySelector('.sortableDiv .el-table__body-wrapper tbody')
   
      // 获取tbody 第二种   有时候document取不到的时候可以使用ref
      const myDialog = this.$refs.myDialog
      const tbody = myDialog.$el.querySelector(
        '#sortableDiv .el-table .el-table__body-wrapper .el-table__body tbody'
      )
      const _this = this
      Sortable.create(tbody, {
        handle: ' .drag-icon',
        draggable: '.el-table__row',
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        }
      })
    },
相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js