react+umi+antdmobile+ali-react-table移动端开发

git地址 https://github.com/liptpb/reactModile.git

1.umi的config配置

 

import { defineConfig } from 'umi';
import px2vw from 'postcss-px-to-viewport';
import routes from './routes';
 
export default defineConfig({
  hash: true,
  // history: {
  //   type: 'hash',
  // },
  publicPath: './', // 如果域名存在后缀，则使用相对路径
  // externals: {
  //   react: 'React',
  //   'react-dom': 'ReactDOM',
  // }, // 通过cdn加载react，减少包大小
  // scripts: [
  //    // 引入jssdk
  //   'https://unpkg.com/react@16.12.0/umd/react.production.min.js',
  //   'https://unpkg.com/react-dom@16.12.0/umd/react-dom.production.min.js',
  // ],
  cssLoader: {
    localsConvention: 'camelCase',
  },
  nodeModulesTransform: {
    type: 'none',
  },
  extraPostCSSPlugins: [
    px2vw({
      unitToConvert: 'px',
      viewportWidth: 375,
      unitPrecision: 5,
      propList: ['*'],
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
      selectorBlackList: ['am-', 'adm-', 'art-'],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: [/node_modules/],
      include: undefined,
      landscape: false,
      landscapeUnit: 'vw',
      landscapeWidth: 568,
    }),
  ],
  title: false,
  antd: { mobile: false },
  plugins: [
    // 'umi-plugin-cache-route',
  ],
  routes: routes,
  fastRefresh: {},
  targets: {
    //配置浏览器最低版本,比如兼容ie11
    ie: 11,
  },
});

2. 缓存插件实现keepalive  文档地址 https://github.com/alitajs/umi-plugin-keep-alive

    npm install umi-plugin-keep-alive --save
    # or
    yarn add umi-plugin-keep-alive

import { KeepAlive } from 'umi'
export default (props: any) => {
  return (
    <KeepAlive
      id={props.location.query.queryParams || props.location.pathname}  缓存id
      when={() => { 判断条件返回boobean或者数组
        if (props.history.action == 'POP') {
          return false;
        }
        return true;
      }}
      saveScrollPosition="screen"
    >
      <你的页面组件/>
    </KeepAlive>

3. table   基本信息 | ali-react-table

import React from 'react';
import { useTablePipeline, features, BaseTable } from 'ali-react-table';
import styles from './index.less';
 
type BaseType = {
  dataSource: any;
  columns: any;
  primaryKey: string; // rowkey
  stickyTop?: number; // 表头吸顶后，距离顶部的距离，默认为 0
  loading?: boolean;
  isSum?: boolean; // 是否首行带合计
  sortClick?: (sort_obj: SortItem[]) => void; // 排序功能
  rowClick?: (row_obj: any) => void; // 行点击功能
};
const MyBaseTable: React.FC<BaseType> = (props) => {
  const {
    dataSource,
    loading,
    primaryKey,
    stickyTop,
    isSum,
    columns,
    sortClick,
    rowClick,
  } = props;
  const sortChange = (vv: SortItem[]) => {
    sortClick && sortClick(vv);
  };
  // 跳转函数
  const rowClickFun = (record: any) => {
    rowClick && rowClick(record);
  };
  const pipeline = useTablePipeline({ components: {} })
    .input({ dataSource, columns })
    .primaryKey(primaryKey)
    .use(
      features.sort({
        mode: 'single',
        keepDataSource: true,
        highlightColumnWhenActive: true,
        orders: ['asc', 'desc', 'none'], // asc 升序 desc 降序
        onChangeSorts: sortChange,
      }),
    );
 
  return (
    <>
      <BaseTable
        className={[styles.myBaseTable, 'compact'].join(' ')}
        style={{
          '--font-size': '13px',
          '--color': '#666666',
          '--header-color': '#000000',
          '--header-bgcolor': '#E4E4E4',
          '--header-row-height': '38px',
          '--row-height': '35px',
          '--cell-padding': '2px 6px',
          // '--highlight-bgcolor':'#6BB0FF',
          // '--header-highlight-bgcolor':'#6BB0FF',
          minHeight: 385,
          // overflow : 'auto'
        }}
        useVirtual={false}
        stickyTop={stickyTop ? stickyTop : 70}
        isLoading={loading}
        {...pipeline.getProps()}
        getRowProps={(record, rowIndex) => {
          // 自定义行样式
          if (isSum) {
            return {
              style:
                rowIndex === 0
                  ? {
                      color: 'red',
                    }
                  : rowIndex % 2 === 1 && rowIndex > 0
                  ? {
                      '--bgcolor': '#F8F8F8',
                      background: '#F8F8F8',
                    }
                  : {
                      background: 'white',
                    },
              onClick() {
                rowClickFun(record);
              },
            };
          } else {
            return {
              style:
                rowIndex % 2 === 1
                  ? {
                      '--bgcolor': '#F8F8F8',
                      background: '#F8F8F8',
                    }
                  : {
                      background: 'white',
                    },
              onClick() {
                rowClickFun(record);
              },
            };
          }
        }}
      />
    </>
  );
};
 
export default MyBaseTable;