vue + ElementUI 封装的公用表格table组件实现拖拽列表功能（Sortablejs）

最新推荐文章于 2024-08-20 16:59:06 发布

AGCA

最新推荐文章于 2024-08-20 16:59:06 发布

阅读量1.1k

点赞数 2

分类专栏： Sortablejs 文章标签： html vue javascript

本文链接：https://blog.csdn.net/agca_zxl/article/details/115770719

版权

Sortablejs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue + ElementUI 封装的公用表格table组件实现拖拽列表功能（Sortablejs）

vue 实现表格拖拽功能有几种方式，比如vuedraggable、vue cardDragger、vue-dragging、Sortablejs。本文主要是介绍在table是封装的公用组件的时候，使用sortablejs有时候拖拽出现效果失效、拖拽延迟（其实就是父子组件之间的通信问题，没有达到数据实时响应，有的不行也可以使用this.$set（Vue.set）改变表格数据的数组）。

Sortablejs

Sortable.js中文文档链接：http://www.itxst.com/sortablejs/neuinffi.html.

在vue里安装Sortablejs：

npm install sortablejs --save

在vue项目文件引用：方式一

import Sortable from ‘sortablejs’;

使用方法

在vue组件的mounted方法里，执行需要行拖拽或者列拖拽的方法 rowDrop()、columnDrop().
HTML

// An highlighted block
<el-table ref="table" :id="'table_'+toolbarId" :data="tableData" border :height="height" row-key="id"
@selection-change="handleSelectionChange" 
@row-click="rowclick" :row-class-name="tableRowClassName" :row-style="selectHignLiaght"
:highlight-current-row="highlightCurrentRow" @current-change="handleChange">
   <el-table-column v-if="showSelection" type="selection" width="55" align="center">
   </el-table-column>
   <el-table-column v-if="highlightCurrentRow" width="55" align="center">
       <template slot-scope="scope">
           <el-radio v-model="radiovlaue" :label="scope.$index+''">{{&nbsp;}}</el-radio>
       </template>
   </el-table-column>
   <slot></slot>
</el-table>

// An highlighted block
mounted() {
	this.rowDrop();
	this.columnDrop();
}

在vue组件methods里定义行拖拽和列拖拽的方法

行拖拽

rowDrop() { // 行拖拽
     // 此时找到的元素是要拖拽元素的父容器
     console.log(this.toolbarId) // 只是表格id，可以忽略
     const tbody = document.querySelector('#table_'+this.toolbarId+' .el-table__body-wrapper tbody');
     const _this = this;
     Sortable.create(tbody, {
         //  指定父元素下可被拖拽的子元素
         draggable: ".el-table__row",
         animation: 180,
         sort: true, // 是否排序
         onEnd (evt) {
         //这里为什么和网上的不太一样，是因为我的是table是公用组件，子组件调用的时候需要数据双向绑定
             _this.tableData.splice(evt.newIndex, 0, _this.tableData.splice(evt.oldIndex, 1)[0]);
             var newArray = _this.tableData.slice(0);
             _this.tableData = [];
             _this.$nextTick(function () {
                 _this.tableData = newArray;
             });
         }
     });
 },
}

列拖拽

rowDrop() { // 行拖拽
 const wrapperTr = document.querySelector('#table_'+this.toolbarId+' .el-table__header-wrapper tr');
  this.sortable = Sortable.create(wrapperTr, {
      animation: 180,
      delay: 0,
      onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex];
          this.dropCol.splice(evt.oldIndex, 1);
          this.dropCol.splice(evt.newIndex, 0, oldItem);
      }
  });
}