ant table表头行列拖拽切换位置

import Sortable from 'sortablejs'
   
// 行拖拽 rowDrop() { const tbody = document.querySelector('.ant-table-tbody') // 元素选择器名称根据实际内容替换 const _this = this Sortable.create(tbody, { // 官网上的配置项,加到这里面来,可以实现各种效果和功能 animation: 150, ghostClass: 'blue-background-class', onEnd({ newIndex, oldIndex }) { const currRow = _this.tableData.splice(oldIndex, 1)[0] _this.tableData.splice(newIndex, 0, currRow) } }) }, /** 列拖拽 */ columnDrop() { const wrapperTr = document.querySelector('.ant-table-thead tr') this.sortable = Sortable.create(wrapperTr, { animation: 180, delay: 0, onEnd: (evt) => { const oldItem = this.tableColumns[evt.oldIndex] this.tableColumns.splice(evt.oldIndex, 1) this.tableColumns.splice(evt.newIndex, 0, oldItem) } }) },

 

      rankingList(params)
        .then((res) => {
          this.tableData = res.records
          this.pageObj.total = Number(res.total)
          this.pageObj.current = Number(res.current)
          this.columnDrop()  // 获取完数据智慧调用
          // this.pageObj.size = res.size
        })
        .finally((e) => {
          this.tableLoading = false
        })

 http://www.sortablejs.com/index.html

posted on 2023-01-28 14:48  稳住别慌  阅读(454)  评论(0编辑  收藏  举报