首頁 > 軟體

關於Element UI table 順序拖動方式

2022-08-09 22:00:11

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、使用

    <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>
<script>
  // 參照 Sortable
  import Sortable from 'sortablejs'
  export default {
    data() {
      return {
        list: []
      }
    },
    mounted() {
      this.rowDrop();
    },
    methods: {
      //行拖拽,排序方法
      rowDrop() {
      // 獲取物件
        const el = document.querySelector('#ability-table .el-table__body-wrapper tbody')
        const self = this
	  // 設定
	    var ops = {
          handle: ".handle",
          onEnd({ newIndex, oldIndex }) {
            self.list.splice(newIndex, 0, self.list.splice(oldIndex, 1)[0])
            const newArray = self.list.slice(0)
            newArray.forEach((value, index) => {
            value.orderNum = index + 1 //序號為index+1
            self.$set(newArray, index, value)
	       
	        self.list= [] //
	        self.$nextTick(() => {
	          self.list= newArray ? newArray : []
	        })
		}
        Sortable.create(el,ops)
      },
    }
</script>

說明:

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)
        }
      })
    }

以上為個人經驗,希望能給大家一個參考,也希望大家多多支援it145.com。


IT145.com E-mail:sddin#qq.com