vxe-table v4 列表自定义列配置（Promise缓存,拖动排序、置顶）

原创

已于 2023-07-08 09:11:13 修改 · 置顶 · 9.1k 阅读

于 2022-10-19 11:16:00 首次发布

解决了啥

列过多加载缓慢 (50+)
用户级自定义列配置只配置想看到的数据
拖拽排序、默认排序字段、设置列宽、置顶列
先渲染表格、再递归请求表头下拉加快渲染

效果展示

在这里插入图片描述

在这里插入图片描述
gif不清楚视频地址 (视频可见:getOne 即请求自定义配置接口只会触发一次，除非主动清楚缓存)

流程

页面渲染流程

routerStart==> 路由开始
routerDone==> 路由结束
useCommonHooks==> 请求配置hooks(请求自定义列配置只会在此处触发一次,其余调用皆走缓存，除非主动清除缓存)
gridMount==> 表格组件渲染钩子
gridQueryRes==> 页面数据请求完毕
gridLoadColumns==> 加载列
queryHeaderOptions==> 递归请求表头下拉options
在这里插入图片描述

代码

表格组件封装Grid

进入页面

  <Grid
      ref="gridRef"
      :columns="tableColumn"
      :toolbar-button="toolbarButtonConfig"
      :operte-button="operateButtonConfig"
      :query-api="yourapi"
      @click-fall-back="clickFallBack"
      @query-options="queryHeaderOptions()"
    />
import {
   
    useCommonTableConfig } from '@/hooks/useCommon'
//此处会触发2 queryHeaderOptions 为递归请求表头下拉options 在表格加载列完成后会触发此方法
const {
   
    tableColumn, queryHeaderOptions } = useCommonTableConfig()

请求配置useCommon

  /**
   * 组合生成column (JSON转换成列,根据业务需求自行实现)
   */
  const patchTableColumn = (data: CustomColumnProps[]): ColumnProps[] => {
   
   
    const temp: ColumnProps[] = [
      {
   
   
        type: 'checkbox',
        width: 50,
        fixed: 'left'
      }
    ]
    for (let index = 0; index < data.length; index++) {
   
   
      const element = data[index]
      const {
   
    slots, field, title, sortable, minWidth, width, selectField, loading, options, rules } = element
      const obj: ColumnProps = {
   
   
        slots: {
   
   
          header: slots
        },
        children: [{
   
    field, title, sortable, selectField, minWidth, width, formatter: formatterFuncMap[field] || null }]
      }
      if (loading !== undefined) obj.loading = loading
      if (options !== undefined) {
   
   
        obj.options = options
        if (!options.length) {
   
   
          // 需要请求表头下拉
          queryHeaderField.value.push({
   
   
            field,
            api: queryHeaderApiMap[field]
          })
        }
      }
      if (rules !== undefined)
        obj.rules = {
   
   
          message: rules.message,
          func: (val) =>
            rules.type === 'decimal'
              ? validDecimal(rules.maxLength as number, rules.maxDecimal as number, val)
              : validInteger(rules.maxLength as number, val)
        }
      temp.push(obj)
    }
    r