Vxe-Table开发中的各种坑以及避坑指南

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
}

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

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

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

// 生成合并单元格数据
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
    }
  })
}

gridMethods.commitProxy('query')
// insert
// insert_actived
// mark_cancel
// remove
// import
// open_import
// export
// open_export
// reset_custom
// _init
// 重置page 并查询
gridMethods.commitProxy('_init') 
// reload
// 重新载入，可以重置一些参数但并不能重置查询参数
gridMethods.commitProxy('reload') 
// query
// delete
// save

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

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