vue中使用el-table+SortableJS实现拖拽排序


前言

最近工作中遇到了一个表格拖拽排序的需求,我这里用了el-table结合SortableJS来实现。


一、安装插件

1.下载

代码如下(示例):

npm i  sortablejs --save
或者
npm i  sortablejs --save

二、使用

1.引入

import Sortable from 'sortablejs'//引入插件

2.html

<el-table
  :data="tableData"
  ref="table"
  border
>
	<el-table-column
	  label="序号"
	  type="index"
	  class-name="tableIndex"
	  align="center"
	  width="80"
	 >
	</el-table-column>
	<el-table-column prop="dataSetsName" align="center" label="数据集名称" min-width="280">
	...
</el-table>

2.js

mounted() {
    document.body.ondrop = function(event) {
       // 阻止默认行为
      event.preventDefault();
      event.stopPropagation();
    };
    this.lineDrop(); //拖拽
  },
 methods:{
 //拖拽方法
    lineDrop() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const _this = this;
      Sortable.create(tbody, {
        animation: 150, // ms, number 单位:ms,定义排序动画的时间
        ghostClass: "ghostClass", //设置拖拽停靠样式类名
        handle: ".tableIndex", // 格式为简单css选择器的字符串,使列表单元中符合选择器的元素成为拖动的手柄,只有按住拖动手柄才能使列表单元进行拖动
        onEnd({ oldIndex, newIndex }) {//拖拽结束后方法
          if (newIndex == oldIndex) return;//如果位置一样return
       	  const tableArr = _this.tableData; // 表格数据
       	  tableArr.splice(
            newIndex,
            0,
            _this.tableData.splice(oldIndex, 1)[0]
          );
          _this.$nextTick(() => {
           // 更新Vue组件的数据
            _this.tableData = tableArr;
        }
      });
    }
 }

更多配置可以参考SortableJS文档

3.样式

我这里设置了拖拽行的停靠样式,给拖拽行的停靠时自定义了边框颜色;
在这里插入图片描述

css:

 ::v-deep {
  // 停靠
  .ghostClass > td {
    &:first-of-type {
      border-left: 1px solid $subject-color;
    }
    &:last-of-type {
      border-right: 1px solid $subject-color;
    }
    border-top: 1px solid $subject-color;
    border-bottom: 1px solid $subject-color;
  }
 }

4.问题

在实现过程中发现拖拽后数据已经发生变化,但是页面显示不正确,发现是和table 视图渲染有关;
拖拽前:
在这里插入图片描述
拖拽后:
在这里插入图片描述
解决方法:
给el-table 加上 “row-key”属性来优化 Table 的渲染即可。

<el-table
  :data="tableData"
  ref="table"
  row-key="id"
  border
></el-table>

小结

  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 使用 `el-table` 实现列表间的功能,可以借助 `sortablejs` 插件。`sortablejs` 是一个基于原生 JavaScript 的排序库,其支持 Vue 等框架。 下面是实现步骤: 1. 安装 `sortablejs` 插件 ```bash npm install sortablejs --save ``` 2. 在 Vue 组件引入 `sortablejs` ```javascript import Sortable from 'sortablejs'; ``` 3. 在 `mounted` 钩子初始化 `sortablejs` ```javascript mounted() { const table = document.getElementById('table'); const options = { animation: 150, onEnd: this.onEndHandler }; Sortable.create(table, options); }, ``` 其,`table` 是 `el-table` 对应的 DOM 元素,`options` 是 `Sortable` 的一些配置项。`onEndHandler` 是当结束时的回调函数,需要自己实现。 4. 实现 `onEndHandler` 回调函数 ```javascript methods: { onEndHandler(event) { const { oldIndex, newIndex } = event; const newData = [...this.tableData]; const [removed] = newData.splice(oldIndex, 1); newData.splice(newIndex, 0, removed); this.tableData = newData; }, }, ``` 其,`tableData` 是 `el-table` 的数据源,当结束后,根据 `oldIndex` 和 `newIndex` 获取被的元素和目标位置,然后在数据源重新排序。 5. 在 `el-table` 添加 `:row-key` 属性 ```html <el-table :data="tableData" :row-key="row => row.id" id="table"> ... </el-table> ``` 这里需要为 `el-table` 指定一个唯一的 `row-key`,以便在结束后能够正确地更新数据源。 完成以上步骤后,即可在 `el-table` 实现列表间的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值