在iview库中不支持拖拽列的调整的解决方案如下:
一、使用sortablejs进行拖拽插件
- npm i sortablejs --save-dev
import Sortable from 'sortablejs'
mounted() {
var el = document.querySelector('.ivu-table-header tr')
var vm = this
Sortable.create(el, {
animation: 150,
onStart: vm.handleOnstart,
onEnd: vm.handleOnend
})
}
methods: {
handleOnstart(el) {
this.table.oldIndex = el.oldIndex
this.table.isDragging = true
},
handleOnend(el) {
this.table.newIndex = el.newIndex
this.table.isDragging = false
this.table.draggingRecord.unshift({
from: this.table.oldIndex,
to: this.table.newIndex
})
this.changeColumn(el.oldIndex, el.newIndex)
},
changeColumn(oldIndex, newIndex) {
//this.caseherder表头数据
var newArr = JSON.parse(JSON.stringify(this.caseherder))
const oldItem = this.caseherder[oldIndex]
newArr.splice(oldIndex, 1)
newArr.splice(newIndex, 0, JSON.parse(JSON.stringify(oldItem)))
//不置空,表头数据不渲染等问题,vue中数据不渲染问题导致
this.caseherder = []
this.$nextTick(() => {
this.caseherder = newArr
})
}
}
修改node_modules/view-design/dist/iview.js
(百度时大神提的解决法案)
columns: {
handler: function handler() {
//修改了这一行
var tempClonedColumns = (0, _assist.deepCopy)(this.columns);
var colsWithId = this.makeColumnsId(tempClonedColumns);
this.allColumns = (0, _util.getAllColumns)(colsWithId);
this.cloneColumns = this.makeColumns(colsWithId);
this.columnRows = this.makeColumnRows(false, colsWithId);
this.leftFixedColumnRows = this.makeColumnRows('left', colsWithId);
this.rightFixedColumnRows = this.makeColumnRows('right', colsWithId);
this.rebuildData = this.makeDataWithSortAndFilter();
this.handleResize();
},
deep: true
}
以前源码如下:
columns: {
handler: function handler() {
var colsWithId = this.makeColumnsId(this.columns);
this.allColumns = (0, _util.getAllColumns)(colsWithId);
this.cloneColumns = this.makeColumns(colsWithId);
this.columnRows = this.makeColumnRows(false, colsWithId);
this.leftFixedColumnRows = this.makeColumnRows('left', colsWithId);
this.rightFixedColumnRows = this.makeColumnRows('right', colsWithId);
this.rebuildData = this.makeDataWithSortAndFilter();
this.handleResize();
},
deep: true
}
现在就可以拖拽列数据了,哈哈,解决了记得给个赞哦!