快捷導(dǎo)航

淺談element關(guān)于table拖拽排序問(wèn)題

更新時(shí)間：2021年10月01日 08:55:09 作者：蘿卜砸大坑

本文主要介紹了element關(guān)于table拖拽排序問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近在使用element table的時(shí)候，經(jīng)常會(huì)遇到排序的問(wèn)題，如果只是簡(jiǎn)單的排序的話，element官方已經(jīng)給出了指定的方法

//table的默認(rèn)排序方式是按ID排序 順序?yàn)檫f減 這里可以改成其它 比如 order
    <el-table :data="tableData" :default-sort="{prop: 'ID', order: 'descending'}">
      //設(shè)置sortable屬性時(shí)出現(xiàn)排序按鈕
      <el-table-column prop="ID" label="座號(hào)" sortable>
    </el-table>

但是，element官方組件并不支持拖拽排序，我在這里引入sortablejs實(shí)現(xiàn)拖拽排序的功能

sortablejs GitHub地址

//安裝sortable.js
Install with NPM:

$ npm install sortablejs --save

//在組件內(nèi)引入
import Sortable from 'sortablejs'

//為需要拖拽排序的表格添加ref屬性
<el-table  ref="dragTable">

//在數(shù)據(jù)渲染完畢添加拖拽事件
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()  //數(shù)據(jù)渲染完畢執(zhí)行方法
         })
    }
    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', '')
            },
           //拖拽結(jié)束執(zhí)行,evt執(zhí)向拖拽的參數(shù)
           onEnd: evt => {
              //判斷是否重新排序
              if(evt.oldIndex !== evt.newIndex){
                  let data = {
                     id:this.bannerTable[evt.oldIndex].id,
                     banner_order:evt.newIndex
                  }
                  //數(shù)據(jù)提交失敗則恢復(fù)舊的排序
                  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)
        }
      })
    }

到此這篇關(guān)于淺談element關(guān)于table拖拽排序問(wèn)題的文章就介紹到這了,更多相關(guān)element table拖拽排序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: