Vxe-Table的各种坑，以及避坑指南（需要补充的请留言）

背景：

由于公司要开发erp，采用了element-plus做为UI基础框架，但是回想往事点点滴滴，element-ui表格的种种表现令人痛心，于是跟leader商量之后决定使用Vxe-Table做表格插件，虽然element-plus在表格上也在大力优化，但就目前来看可用度确实不高，刚出了一个虚拟滚动，但看上去确实让人有点心急。。。

开发阶段遇到的各种问题 全局size的问题

有点扯犊子的事，我element-plus要做全局的size修改，那就意味着我的表格也要做全局的size修改，庆幸的是它有自带的全局size配置，配置方法也很简单，在setup方法中设置即可，配合vuex、本地存储（包括cookie），还有模有样的可以搞一搞，不幸的是，这特么size跟element-plus的size规则天差地别，虽然可以通过修改变量去规避这个问题，但是成本属实有点高。而且element-plus的为large、default、small，但是Vxe-Table的为下面是medium、small、mini还需要做判断，杂七杂八，有点小恶心。下面附上代码。

import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
//引入font-awesome
import 'font-awesome/css/font-awesome.css'
import { localAppSizeKey } from '@/store/modules/settings/index'

VXETable.setup({
  size: formatSize(localStorage.getItem(localAppSizeKey) || 'default') as any
})

export default function (app: any) {
  app.use(VXETable)
  // 给 vue 实例挂载内部对象，例如：
  // app.config.globalProperties.$XModal = VXETable.modal
  // app.config.globalProperties.$XPrint = VXETable.print
  // app.config.globalProperties.$XSaveFile = VXETable.saveFile
  // app.config.globalProperties.$XReadFile = VXETable.readFile
}

/**
 * 解析element-plus的全局size
 * @param size
 * @returns
 */
function formatSize(size: null | undefined | string) {
  let resSize = 'small'
  switch (size) {
    case 'large':
      resSize = 'medium'
      break
    case 'default':
      resSize = 'small'
      break
    case 'small':
      resSize = 'mini'
      break
  }
  return resSize
}

size是存在localStorage里面的，设置一次，更新一次值，我这里就很简单粗暴了，全局设置element-plus的size然后通过format方法解析，存入本地存储，然后刷新页面，啊哈哈哈哈，问就是还不知道咋搞，有人知道的麻烦私一个，解决这个问题。

按钮的问题

说真的，我很能理解作者的设计模式，我也很佩服作者的代码功底，毕竟我只是一个使用者，但是但是，你自己开发一套按钮什么的，能不能走点心嘛，按钮中的文字居然不能垂直居中。大哥这都啥年代了哎，附上我处理按钮垂直居中的代码

.vxe-button.type--button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

简单粗暴，flex解决，有问题再解决

合并单元格的问题

单元格合并的按照官网提供的案例，第一次使用了spanMethod方法，那时候数据量少，没有开启虚拟滚动，后来数据量大了，测试滚动了一下叫了一声，我头皮一麻就知道出问题了，结果我看到官网上赫然写着，不支持虚拟滚动，哎~~ 我用这个表格不就是冲着虚拟滚动来的吗？再找解决方案把，后来决定还是用【mergeCells】去解决这个问题，解决思路就是，根据需求，合并固定的列，然后在数据中查询最近的相同数据（后端已排好序），生成要合并的数据，然后赋值到gridOptions对象上面，具体实现如下：

proxyConfig: {
    seq: true,
    sort: true,
    filter: true,
    form: true,
    props: {
      result: 'data.data',
      total: 'data.totalCount'
    },
    ajax: {
      query: async ({ page, form }) => {
        const { pageSize: size, currentPage } = page
        const paging = { size, page: currentPage }
        const queryParams: any = Object.assign({ isOdm: 1 }, paging, form)
        const response = await queryList(queryParams)
        // 合并单元格选项
        let mergeCells: any[] = []
        mergeCells = generateMergeCells(
          response.data.data,
          'spuName',
          [2, 3, 4, 5, 6, 7, 8]
        )
        gridOptions.mergeCells = mergeCells
        return response
      }
    }
  },

这时候第一页可以分页了，但是跳转页面后，发现问题了，第二页分页居然错乱？后面的全乱了！！大爷的。为此谷歌百度都查了，结果还是没有解决方案。后来突发奇想，每次分页我reload一下会不会好点，结果还真就行了，其实就是在前面代码中加入一行代码：xGrid.value.reloadData(response.data.data)

proxyConfig: {
    seq: true,
    sort: true,
    filter: true,
    form: true,
    props: {
      result: 'data.data',
      total: 'data.totalCount'
    },
    ajax: {
      query: async ({ page, form }) => {
        const { pageSize: size, currentPage } = page
        const paging = { size, page: currentPage }
        const queryParams: any = Object.assign({ isOdm: 1 }, paging, form)
        const response = await queryList(queryParams)
        // 合并单元格选项
        let mergeCells: any[] = []
        mergeCells = generateMergeCells(
          response.data.data,
          'spuName',
          [2, 3, 4, 5, 6, 7, 8]
        )
        gridOptions.mergeCells = mergeCells
        xGrid.value.reloadData(response.data.data)
        return response
      }
    }
  },

芜湖~~，解决！附上动态生成mergeCells的代码

// 生成合并单元格数据
export const generateMergeCells = (
  data: any[],
  key: string,
  cols: number[]
) => {
  if (data.length === 0) return []
  let pointer: number = 0
  let total: number = 0
  let curKeyValue: any = data[0][key]
  const result = data.reduce((acc: any[], cur: any, index: number) => {
    const val = cur[key]
    let mergeData: any = []
    if (val !== curKeyValue) {
      // 生成合并数据
      if (total > 1) {
        mergeData = generateCells(cols, pointer, total)
      }
      curKeyValue = val
      pointer = index // 指针index赋值
      total = 1
    } else {
      total += 1
      if (index === data.length - 1) {
        mergeData = generateCells(cols, pointer, total)
      }
    }
    acc.push(...mergeData)
    return acc
  }, [])
  return result
}

export const generateCells = (
  cols: number[],
  rowIndex: number,
  rowspan: number
) => {
  return cols.map((col: number) => {
    return {
      row: rowIndex,
      col,
      rowspan,
      colspan: 1
    }
  })
}

reload和load的问题

我实在搞不懂为什么每次reload和load要传参数进去，而却重置和查询这种按钮的方法没有抛出来以供调用。

其他问题

暂时还没想到，想到了再更新吧，有兄弟姐妹愿意跟我讨论的可以一起嗷~~