vxe-table 引入 （vxe-table 3.1.6版本才行 3.1.8版本有問題 需要引入固定版本）

npm install xe-utils vxe-table 

借助插件 babel-plugin-import 可以實(shí)現(xiàn)按需加載模塊，減少文件體積。修改 .babelrc 或 babel.config.js 配置文件

npm install babel-plugin-import -D

// 在 .babelrc 文件夾添加
{
        "plugins": [
          [
            "import",
            {
              "libraryName": "vxe-table",
              "style": true // 樣式是否也按需加載
            }
          ]
        ]
}

基于 vxe-table 表格的適配插件，用于兼容 iview、view-design 組件庫

npm install vxe-table-plugin-iview

最后這樣按需引入模塊，就可以減小體積了

// src / plugins / utils.js
import 'xe-utils'

// src / plugins / table.js
import Vue from 'vue'
import XEUtils from 'xe-utils'
import {
    VXETable,
    Table,
    Icon,
    Column,
    Header,
    Footer,
    Filter,
    Edit,
    Export,
    Keyboard,
    Validator,

    Grid, // </vxe-grid>
} from 'vxe-table'

//  適配 iview 組件
import VXETablePluginIView from 'vxe-table-plugin-iview'
import 'vxe-table-plugin-iview/dist/style.css'

// 表格模塊
Vue.use(Icon)
Vue.use(Header)
Vue.use(Footer)
Vue.use(Filter)
Vue.use(Edit)
Vue.use(Export)
Vue.use(Keyboard)
Vue.use(Validator)

// 可選組件
Vue.use(Column)
Vue.use(Grid)

// 安裝表格
Vue.use(Table)

VXETable.use(VXETablePluginIView)

// 給 vue 實(shí)例掛載內(nèi)部對象，例如：

Vue.prototype.XEUtils = XEUtils;

table 列拖拽

npm install sortablejs --save

// 在需要的頁面引入JS
import Sortable from 'sortablejs';

// 列拖拽
    columnDrop () {
      this.$nextTick(() => {
        let xTable = this.$refs.xTable;
        if(xTable){
          this.sortable = Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row'), {
            handle: '.vxe-header--column',
            onEnd: ({ newIndex, oldIndex }) => {
              let tableColumn = xTable.getColumns()
              let currRow = tableColumn.splice(oldIndex, 1)[0]
              tableColumn.splice(newIndex, 0, currRow)
              xTable.loadColumn(tableColumn)
            }
          })
        }
      })
    },