問題介紹：
a-table設置固定列之后，表格無法排序，Sortablejs失效
圖片.png
Sortablejs使用：
// 拖拽排序方法
dragSort () {
const tableSort = this.$refs.tableSort
this.sortable = Sortable.create(tableSort.$el.querySelector('tbody'), {
handle: '.drag-btn',
onEnd: ({ newIndex, oldIndex }) => {
const currRow = this.data.splice(oldIndex, 1)[0]
this.data.splice(newIndex, 0, currRow)
this.codeTableSort(this.data)
}
})
},
解決：
思路：設置fixed: 'right'后，會生成一個新表格(只有操作列），如圖藍色部分，原來的寫法綁定的是原表格的tbody,將它變成新表格的tbody
藍色為新表格
寫法：
// 拖拽排序方法
dragSort () {
const tableSort = this.$refs.tableSort
console.log('tableSort', tableSort)
// 獲取頁面中排序需要的表格tbody
// var array = document.getElementsByTagName('tbody') // 所有tobody
// 另外一種獲取方法
var array = tableSort.$el.querySelectorAll('tbody') // 所有tobody
console.log('array', array)
// 查看所有tbody
for (var i = 0; i < array.length; i++) {
console.log(i, array[i])
}
this.sortable = Sortable.create(array[1], {
handle: '.drag-btn',
onEnd: ({ newIndex, oldIndex }) => {
const currRow = this.data.splice(oldIndex, 1)[0]
this.data.splice(newIndex, 0, currRow)
this.codeTableSort(this.data)
}
})
},
參考：
思路超級好，就是感覺好復雜
