×

vue Element UI 小应用:实现tab拖动应用

作者:Web前端之家2022.08.10来源:Web前端之家浏览:735评论:0
关键词:vueElementUI
微信公众号

微信公众号

vue Element UI 小应用:实现tab拖动应用。先看个图:

image.png

直接拖动tab元素,然后进行排版,如何实现呢?往下看吧。

方法

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

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

基本使用

1、安装

npm install sortablejs --save

2、引用

import Sortable from 'sortablejs'

3、使用

    <el-table
      id="table"
      :data="list"
      row-key="id"
      style="width: 500px"
    >
      <el-table-column
        prop="name"
        label="称"
        width="180"
      />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            class="handle"
            size="mini"
          ><i class="el-icon-rank" /> 移动</el-button>
        </template>
      </el-table-column>
    </el-table>

说明:

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
    <el-table :data="tableData" :default-sort="{prop: 'ID', order: 'descending'}">
      //设置sortable属性时出现排序按钮
      <el-table-column prop="ID" label="座号" sortable>
    </el-table>

但是,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属性
<el-table  ref="dragTable">
//在数据渲染完毕添加拖拽事件
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)
        }
      })
    }

您的支持是我们创作的动力!
温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vueelemtui20220810.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    sddddddddddddddVS的vVSVS但是v方法v方法v发v方法v发v发v方不方便德文法文...

  • 没人发言

    鸡肋的功能...

  • 23b

    这个你应该加群找群主才对吧...

  • 访客

    大佬,能提供能一下提取图片中的文字工具的源码吗,感谢...

  • qdxx

    SEO原创还可以的,新手学习下。...

  • Web前端之家

    已处理!...

  • 程序员路灯

    贵站友链已添加名称:程序员路灯地址:http://www.eqishare.com...

  • Web前端之家

    可以加群讨论...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2022 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2