20.记录Vue项目vxe-table 按需引入

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

npm install xe-utils vxe-table 

借助插件 babel-plugin-import 可以实现按需加载模块，减少文件体积。修改 .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 实例挂载内部对象，例如：

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)
            }
          })
        }
      })
    },