iview4.x中实现表格列拖拽｜左右拖动｜点击标题移动｜iview拖拽后数据变化但是标题未变

本文主要是介绍iview4.x中实现表格列拖拽｜左右拖动｜点击标题移动｜iview拖拽后数据变化但是标题未变，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 1、sortablejs

npm install sortablejs --save

2、引入

import Sortable from 'sortablejs'

3、 mounted

mounted() {

        this.columnDrop()

},

 4、mothods

columnDrop() {

        let tbody = document.querySelector('.ivu-table-header tr')

        let _this = this

        Sortable.create(tbody, {

                onEnd(evt) {

                        _this.columnsList.splice(evt.newIndex, 0, _this.columnsList.splice(evt.oldIndex, 1)[0]);

                        var newArray = _this.columnsList.slice(0);

                        _this.columnsList = [];

                        _this.$nextTick(function () {

                                _this.columnsList = newArray;

                        });

                }

        })

},

注意，columnsList是表格column， 最后使用this.$nextTick() ,不然页面会出现数据拖拽了标题没有变化的bug

这篇关于iview4.x中实现表格列拖拽｜左右拖动｜点击标题移动｜iview拖拽后数据变化但是标题未变的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---