Vxe-Table開發(fā)中的各種坑以及避坑指南

更新時(shí)間：2022年09月01日 09:39:12 作者：小狼子丶

vxe-table是一個(gè)全功能的Vue表格,滿足絕大部分對Table的一切需求,與任意組件庫完美兼容,下面這篇文章主要給大家介紹了關(guān)于Vxe-Table開發(fā)中各種坑以及避坑的相關(guān)資料,需要的朋友可以參考下

背景：

由于公司要開發(fā)erp，采用了element-plus做為UI基礎(chǔ)框架，但是回想往事點(diǎn)點(diǎn)滴滴，element-ui表格的種種表現(xiàn)令人痛心，于是跟leader商量之后決定使用Vxe-Table做表格插件，雖然element-plus在表格上也在大力優(yōu)化，但就目前來看可用度確實(shí)不高，剛出了一個(gè)虛擬滾動(dòng)，但看上去確實(shí)讓人有點(diǎn)心急。。。

開發(fā)階段遇到的各種問題

全局size的問題

有點(diǎn)扯犢子的事，我element-plus要做全局的size修改，那就意味著我的表格也要做全局的size修改，慶幸的是它有自帶的全局size配置，配置方法也很簡單，在setup方法中設(shè)置即可，配合vuex、本地存儲（包括cookie），還有模有樣的可以搞一搞，不幸的是，這特么size跟element-plus的size規(guī)則天差地別，雖然可以通過修改變量去規(guī)避這個(gè)問題，但是成本屬實(shí)有點(diǎn)高。而且element-plus的為large、default、small，但是Vxe-Table的為下面是medium、small、mini還需要做判斷，雜七雜八，有點(diǎn)小惡心。下面附上代碼。

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 實(shí)例掛載內(nèi)部對象，例如：
  // 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里面的，設(shè)置一次，更新一次值，我這里就很簡單粗暴了，全局設(shè)置element-plus的size然后通過format方法解析，存入本地存儲，然后刷新頁面，啊哈哈哈哈，問就是還不知道咋搞，有人知道的麻煩私一個(gè)，解決這個(gè)問題。

按鈕的問題

說真的，我很能理解作者的設(shè)計(jì)模式，我也很佩服作者的代碼功底，畢竟我只是一個(gè)使用者，但是但是，你自己開發(fā)一套按鈕什么的，能不能走點(diǎn)心嘛，按鈕中的文字居然不能垂直居中。大哥這都啥年代了哎，附上我處理按鈕垂直居中的代碼

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

簡單粗暴，flex解決，有問題再解決

合并單元格的問題

單元格合并的按照官網(wǎng)提供的案例，第一次使用了spanMethod方法，那時(shí)候數(shù)據(jù)量少，沒有開啟虛擬滾動(dòng)，后來數(shù)據(jù)量大了，測試滾動(dòng)了一下叫了一聲，我頭皮一麻就知道出問題了，結(jié)果我看到官網(wǎng)上赫然寫著，不支持虛擬滾動(dòng)，哎~~ 我用這個(gè)表格不就是沖著虛擬滾動(dòng)來的嗎？再找解決方案把，后來決定還是用【mergeCells】去解決這個(gè)問題，解決思路就是，根據(jù)需求，合并固定的列，然后在數(shù)據(jù)中查詢最近的相同數(shù)據(jù)（后端已排好序），生成要合并的數(shù)據(jù)，然后賦值到gridOptions對象上面，具體實(shí)現(xiàn)如下：

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)
        // 合并單元格選項(xiàng)
        let mergeCells: any[] = []
        mergeCells = generateMergeCells(
          response.data.data,
          'spuName',
          [2, 3, 4, 5, 6, 7, 8]
        )
        gridOptions.mergeCells = mergeCells
        return response
      }
    }
  },

這時(shí)候第一頁可以分頁了，但是跳轉(zhuǎn)頁面后，發(fā)現(xiàn)問題了，第二頁分頁居然錯(cuò)亂？后面的全亂了??！為此谷歌百度都查了，結(jié)果還是沒有解決方案。后來突發(fā)奇想，每次分頁我reload一下會(huì)不會(huì)好點(diǎn)，結(jié)果還真就行了，其實(shí)就是在前面代碼中加入一行代碼：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)
        // 合并單元格選項(xiàng)
        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
      }
    }
  },

蕪湖~~，解決！附上動(dòng)態(tài)生成mergeCells的代碼

// 生成合并單元格數(shù)據(jù)
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) {
      // 生成合并數(shù)據(jù)
      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的問題

我實(shí)在搞不懂為什么每次reload和load要傳參數(shù)進(jìn)去，而卻重置和查詢這種按鈕的方法沒有拋出來以供調(diào)用。

但是也可以解決，作者拋出了很多方法，但是說明文檔里面沒有...，具體可以參照node_modules/vxe-table/packages/src/grid.ts文件

gridMethods.commitProxy('query')
// insert
// insert_actived
// mark_cancel
// remove
// import
// open_import
// export
// open_export
// reset_custom
// _init
// 重置page 并查詢
gridMethods.commitProxy('_init') 
// reload
// 重新載入，可以重置一些參數(shù)但并不能重置查詢參數(shù)
gridMethods.commitProxy('reload') 
// query
// delete
// save

grid在重置之后列表自動(dòng)查詢的時(shí)候還是會(huì)把原本的數(shù)據(jù)帶過去的問題解決

在被坑的死去活來的時(shí)候，發(fā)現(xiàn)，grid的查詢字段，如果ui不是自帶的，這時(shí)候就會(huì)又有一個(gè)問題，那就是點(diǎn)擊重置的時(shí)候，slots自定義的組件不能重置，后來發(fā)現(xiàn)有@form-reset的方法去重置，但是需要自己去寫，這一點(diǎn)不是很友好，但是還可以接受

<vxe-grid ref="xGrid"
    class="sl-main-wrapper"
    v-bind="gridOptions"
    @form-reset="gridformReset">
  ...
</vxe-grid>

const gridformReset = ({ data }) => {
  const keys = ['picker', 'stereotypeMaker', 'status']
  keys.forEach((i: any) => {
    data[i] = undefined
  })
}

但是發(fā)現(xiàn)了一個(gè)問題，我第一次重置的時(shí)候，我重置后的值居然帶不過去，它還是上一個(gè)條件的參數(shù)~~，我滴個(gè)親哥，要命啊，找了很多解決方案，首先是代碼次序，不行，再次是重新組織查詢的參數(shù)，發(fā)現(xiàn)還是不行，后來在吃飯的時(shí)候想起來會(huì)不會(huì)是因?yàn)闆]有nextTick的原因呢？

果然是！?。。。。。。。。。。。。。。。。。。。。。。?！

最后的解決方案是這樣的：

以下代碼只是我的場景，核心點(diǎn)是return nextTick(() => { return response })

query: ({ page, form }) => {
    return nextTick(async () => {
      const { pageSize: size, currentPage } = page
      const paging = { size, page: currentPage }
      const queryParams: any = Object.assign(paging, form)
      const vxeForm = clone(queryParams, true)
      const picker = vxeForm.picker || []
      if (picker.length > 0) {
        if (form.dateType === 1) {
          vxeForm.tailorCompleteTimeStart = picker[0]
          vxeForm.tailorCompleteTimeEnd = picker[1]
        } else if (form.dateType === 2) {
          vxeForm.stereotypeCompleteTimeStart = picker[0]
          vxeForm.stereotypeCompleteTimeEnd = picker[1]
        }
      }
      delete vxeForm.picker
      delete vxeForm.dateType
      const response = await queryList(vxeForm)
      return response
    })
  }