vue iview sortablejs拖拽列的位置遇到的问题

648 阅读1分钟

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

现在就可以拖拽列数据了,哈哈,解决了记得给个赞哦!