您现在的位置是：网站首页> 编程资料编程资料

关于Element UI table 顺序拖动方式_vue.js_

2023-05-24 332人已围观

简介 关于Element UI table 顺序拖动方式_vue.js_

Element UI table 顺序拖动

使用Sortable.js插件。对element-ui中的el-table进行拖拽行排序。

在这里插入图片描述

new Sortable(example1, { animation: 150, ghostClass: 'blue-background-class' });

官网：

[1] Sortable.js官网配置项说明等

[2] Sortable更多使用示例

基本使用

1、安装

npm install sortablejs --save

2、引用

import Sortable from 'sortablejs'

3、使用

说明：

orderNum：为排序号

handle： 使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动

Array.splice() 方法有三个参数：

  • index ：规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
  • howmany：要删除的项目数量。如果设置为 0，则不会删除项目。
  • item1, ..., itemX ：向数组添加的新项目。

注意：

  • newArray = Array.splice(0): 表示将原数组赋给新数组，并将原数组清空。
  • 要在el-table渲染后调用 this.rowDrop(); 方法
  • 组件绑定是根据Id绑定的：document.querySelector('#ability-table .el-table__body-wrapper tbody')，要注意父组件Id和子组件Id不要重名，否则会优先绑定到父组件对应的Id元素。

element关于table拖拽排序问题

最近在使用element table的时候，经常会遇到排序的问题，如果只是简单的排序的话，element官方已经给出了指定的方法

//table的默认排序方式是按ID排序 顺序为递减 这里可以改成其它 比如 order            //设置sortable属性时出现排序按钮           

但是，element官方组件并不支持拖拽排序，我在这里引入sortablejs实现拖拽排序的功能

sortablejs GitHub地址

//sortablejs     GitHub地址 https://github.com/SortableJS/Sortable#readme
//安装sortable.js Install with NPM: $ npm install sortablejs --save //在组件内引入 import Sortable from 'sortablejs' //为需要拖拽排序的表格添加ref属性  //在数据渲染完毕添加拖拽事件 created(){    this.getBanner() }, methods:{     async getBanner(val){           await apiGetBanner().then((res)=>{                this.bannerTable = res.data.data;           })          this.oldList = this.bannerTable.map(v => v.id);          this.newList = this.oldList.slice();          this.$nextTick(() => {              this.setSort()  //数据渲染完毕执行方法          })     }     setSort() {         const el = this.$refs.dragTable.$el.querySelectorAll(                 '.el-table__body-wrapper > table > tbody'         )[0];         this.sortable = Sortable.create(el, {             // Class name for the drop placeholder,                 ghostClass: 'sortable-ghost',                  setData: function(dataTransfer) {                 dataTransfer.setData('Text', '')             },            //拖拽结束执行,evt执向拖拽的参数            onEnd: evt => {               //判断是否重新排序               if(evt.oldIndex !== evt.newIndex){                   let data = {                      id:this.bannerTable[evt.oldIndex].id,                      banner_order:evt.newIndex                   }                   //数据提交失败则恢复旧的排序                   apiPutBanner(data).catch(()=>{                      const targetRow = this.bannerTable.splice(evt.oldIndex, 1)[0];                      this.bannerTable.splice(evt.newIndex, 0, targetRow);                   })               }             }         })     } }

如果需要列拖拽的话，可以参考下面的代码，和上面是一样的原理，在这里我就不赘述了

//行拖拽     rowDrop() {       const tbody = document.querySelector('.el-table__body-wrapper tbody')       const _this = this       Sortable.create(tbody, {         onEnd({ newIndex, oldIndex }) {           const currRow = _this.tableData.splice(oldIndex, 1)[0]           _this.tableData.splice(newIndex, 0, currRow)         }       })     },     //列拖拽     columnDrop() {       const wrapperTr = document.querySelector('.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)         }       })     }

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章:

上一篇：JavaScript设计模式之职责链模式详解_javascript技巧_

下一篇：vue虚拟滚动性能优化方式详解_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网