Jeecg3封装组件之Table组件 - BasicTable文

组件返回的对象

        tableElRef,
        getBindValues,
        getLoading,
        registerForm,
        handleSearchInfoChange,
        getEmptyDataIsShowTable,
        handleTableChange,
        getRowClassName,
        wrapRef,
        tableAction,
        redoHeight,
        handleResizeColumn: (w, col) => {
          col.width = w;
        },
        getFormProps: getFormProps as any,
        replaceFormSlotKey,
        getFormSlotKeys,
        getWrapperClass,
        getMaxColumnWidth,
        columns: getViewColumns,

        // update-begin--author:sunjianlei---date:220230630---for：【QQYUN-5571】自封装选择列，解决数据行选择卡顿问题
        selectHeaderProps,
        isCustomSelection,
        // update-end--author:sunjianlei---date:220230630---for：【QQYUN-5571】自封装选择列，解决数据行选择卡顿问题
        slotNamesGroup,

代码说明：

一. 响应式对象定义

// 【元素】 - table标签
const tableElRef = ref(null);

// 【数据】 - 列表数据对象
const tableData = ref<Recordable[]>([]);

// 【元素】 - 最外层div元素对象
const wrapRef = ref(null);

// 【Props属性】 - 类型参数BasicTableProps
const innerPropsRef = ref<Partial<BasicTableProps>>();

二、样式 class 属性前缀获取

const { prefixCls } = useDesign('basic-table');

useDesign 使用说明

三. 查询条件定义

@TODU 未完待续

const [registerForm, formActions] = useForm();

四. merge生成 table 标签所需要的props属性

const getProps = computed(() => {
  return { ...props, ...unref(innerPropsRef) } as BasicTableProps;
});

五、是否固定高度

const isFixedHeightPage = inject(PageWrapperFixedHeightKey, false);

Vue3的provide、inject使用方法

六、监听方法

watchEffect(() => {
    unref(isFixedHeightPage) &&
    props.canResize &&
    warn("'canResize' of BasicTable may not work in PageWrapper with 'fixedHeight' (especially in hot updates)");
      });

七、hooks之 loading和分页

const { getLoading, setLoading } = useLoading(getProps);
const { getPaginationInfo, getPagination, setPagination, setShowPagination, getShowPagination } = usePagination(getProps);

八、获取子级列名

为了树形数据的展示，可以自定配置中children名字

// 子级列名
const childrenColumnName = computed(() => getProps.value.childrenColumnName || 'children');

例子

ui效果
代码

九、自定义选择列

// 自定义选择列
const {
  getRowSelection,
  getSelectRows,
  getSelectRowKeys,
  setSelectedRowKeys,
  getRowSelectionRef,
  selectHeaderProps,
  isCustomSelection,
  handleCustomSelectColumn,
  clearSelectedRowKeys,
  deleteSelectRowByKey,
  getExpandIconColumnIndex,
} = useCustomSelection(
  getProps,
  emit,
  wrapRef,
  getPaginationInfo,
  tableData,
  childrenColumnName
)    

十、hooks之获取数据源

const {
  handleTableChange: onTableChange,
  getDataSourceRef,
  getDataSource,
  getRawDataSource,
  setTableData,
  updateTableDataRecord,
  deleteTableDataRecord,
  insertTableDataRecord,
  findTableDataRecord,
  fetch,
  getRowKey,
  reload,
  getAutoCreateKey,
  updateTableData,
} = useDataSource(
  getProps,
  {
    tableData,
    getPaginationInfo,
    setLoading,
    setPagination,
    validate: formActions.validate,
    clearSelectedRowKeys,
  },
  emit
);

十二、hooks之各种处理

      const { getViewColumns, getColumns, setCacheColumnsByField, setColumns, getColumnsRef, getCacheColumns } = useColumns(
        getProps,
        getPaginationInfo,
        // update-begin--author:sunjianlei---date:220230630---for：【QQYUN-5571】自封装选择列，解决数据行选择卡顿问题
        handleCustomSelectColumn,
        // update-end--author:sunjianlei---date:220230630---for：【QQYUN-5571】自封装选择列，解决数据行选择卡顿问题
      );

      const { getScrollRef, redoHeight } = useTableScroll(getProps, tableElRef, getColumnsRef, getRowSelectionRef, getDataSourceRef);

      const { customRow } = useCustomRow(getProps, {
        setSelectedRowKeys,
        getSelectRowKeys,
        clearSelectedRowKeys,
        getAutoCreateKey,
        emit,
      });

      const { getRowClassName } = useTableStyle(getProps, prefixCls);

      const { getExpandOption, expandAll, collapseAll } = useTableExpand(getProps, tableData, emit);

      const handlers: InnerHandlers = {
        onColumnsChange: (data: ColumnChangeParam[]) => {
          emit('columns-change', data);
          // support useTable
          unref(getProps).onColumnsChange?.(data);
        },
      };

      const { getHeaderProps } = useTableHeader(getProps, slots, handlers);

      const { getFooterProps } = useTableFooter(getProps, slots, getScrollRef, tableElRef, getDataSourceRef);

      const { getFormProps, replaceFormSlotKey, getFormSlotKeys, handleSearchInfoChange } = useTableForm(getProps, slots, fetch, getLoading);

十三、计算属性 - 绑定到table标签上得

const getBindValues = computed(() => {
  const dataSource = unref(getDataSourceRef);
  let propsData: Recordable = {
    // ...(dataSource.length === 0 ? { getPopupContainer: () => document.body } : {}),
    ...attrs,
    customRow,
    //树列表展开使用AntDesignVue默认的加减图标 author:scott date:20210914
    //expandIcon: slots.expandIcon ? null : expandIcon(),
    ...unref(getProps),
    ...unref(getHeaderProps),
    scroll: unref(getScrollRef),
    loading: unref(getLoading),
    tableLayout: 'fixed',
    rowSelection: unref(getRowSelectionRef),
    rowKey: unref(getRowKey),
    columns: toRaw(unref(getViewColumns)),
    pagination: toRaw(unref(getPaginationInfo)),
    dataSource,
    footer: unref(getFooterProps),
    ...unref(getExpandOption),
    // 【QQYUN-5837】动态计算 expandIconColumnIndex
    expandIconColumnIndex: getExpandIconColumnIndex.value,
  };

  //update-begin---author:wangshuai ---date:20230214  for：[QQYUN-4237]代码生成 内嵌子表模式 没有滚动条------------
  //额外的展开行存在插槽时会将滚动移除掉,注释掉
  /*if (slots.expandedRowRender) {
    propsData = omit(propsData, 'scroll');
  }*/
  //update-end---author:wangshuai ---date:20230214  for：[QQYUN-4237]代码生成 内嵌子表模式 没有滚动条------------ 

  // update-begin--author:sunjianlei---date:220230630---for：【QQYUN-5571】自封装选择列，解决数据行选择卡顿问题
  // 自定义选择列，需要去掉原生的
  delete propsData.rowSelection
  // update-end--author:sunjianlei---date:220230630---for：【QQYUN-5571】自封装选择列，解决数据行选择卡顿问题

  propsData = omit(propsData, ['class', 'onChange']);
  return propsData;
});

omit函数作用，过滤掉相关属性。
这些lodash

十四、统一设置表格列宽度和最外层wrapper样式

const getMaxColumnWidth = computed(() => {
    const values = unref(getBindValues);
    return values.maxColumnWidth > 0 ? values.maxColumnWidth + 'px' : null;
});

const getWrapperClass = computed(() => {
  const values = unref(getBindValues);
  return [
    prefixCls,
    attrs.class,
    {
      [`${prefixCls}-form-container`]: values.useSearchForm,
      [`${prefixCls}--inset`]: values.inset,
      [`${prefixCls}-col-max-width`]: getMaxColumnWidth.value != null,
      // 是否显示表尾合计
      [`${prefixCls}--show-summary`]: values.showSummary,
    },
  ];
});
      

十五、调用setProps方法，修改 innerPropsRef

function setProps(props: Partial<BasicTableProps>) {
    innerPropsRef.value = { ...unref(innerPropsRef), ...props };
}

十六、定义tableAction：TableActionType

const tableAction: TableActionType = {
  reload,
  getSelectRows,
  clearSelectedRowKeys,
  getSelectRowKeys,
  deleteSelectRowByKey,
  setPagination,
  setTableData,
  updateTableDataRecord,
  deleteTableDataRecord,
  insertTableDataRecord,
  findTableDataRecord,
  redoHeight,
  setSelectedRowKeys,
  setColumns,
  setLoading,
  getDataSource,
  getRawDataSource,
  setProps,
  getRowSelection,
  getPaginationRef: getPagination,
  getColumns,
  getCacheColumns,
  emit,
  updateTableData,
  setShowPagination,
  getShowPagination,
  setCacheColumnsByField,
  expandAll,
  collapseAll,
  getSize: () => {
    return unref(getBindValues).size as SizeType;
  },
};
createTableContext({ ...tableAction, wrapRef, getBindValues });

十七、创建table的上下文

createTableContext({ ...tableAction, wrapRef, getBindValues });

十八、获取分组之后的slot名称

      // 获取分组之后的slot名称
      const slotNamesGroup = computed<{
        // AntTable原生插槽
        native: string[];
        // 列自定义插槽
        custom: string[];
      }>(() => {
        const native: string[] = [];
        const custom: string[] = [];
        const columns = unref<Recordable[]>(getViewColumns) as BasicColumn[];
        const allCustomRender = columns.map<string>((column) => column.slotsBak?.customRender);
        for (const name of Object.keys(slots)) {
          // 过滤特殊的插槽
          if (['bodyCell'].includes(name)) {
            continue;
          }
          if (allCustomRender.includes(name)) {
            custom.push(name);
          } else {
            native.push(name);
          }
        }
        return { native, custom };
      });

十九、暴露tableAction给父级组件

expose(tableAction);

1、Vue3 中的 expose
2、如何使用vue3新增的expose函数（暴露公共属性）

二十、分发事件 register

emit('register', tableAction, formActions);