常用工具

前端项目自带了一些常用工具或者内置组件

其中包括：

一键导出antd table组件为excel文件的WebExportExcel组件

表格导出

导出excel

使用src/utils/WebExportExcel.js 可以很方便的导出excel。

/src/utils/WebExportExcel.js

/**
 * WebExportExcel组件用于导出Excel表格
 * 该组件通过接收列配置、请求URL、请求参数、工作表名称等属性，完成数据请求和Excel导出功能
 * @param {Object} props 组件属性
 * @param {Array} props.columns 列配置，用于生成Excel的表头
 * @param {string} props.url 数据请求的URL
 * @param {Object} props.params 请求参数，默认为空对象
 * @param {string} props.sheetName 工作表名称
 * @param {Object} props.style 按钮样式，默认为空对象
 */
const WebExportExcel = ({
  columns,
  url,
  params = {},
  sheetName,
  style = {},
}) => {
  // 此处省略代码
};

导出excel示例

src/pages/list/TableList.tsx

import WebExportExcel from "@/utils/WebExportExcel";
const Index = () => {
  <Card
    title="路线技术等级薄弱点列表"
    size="small"
    extra={
      <Space>
        {hasPermission("Export") ? (
          <WebExportExcel
            params={{ ...filter, rows: total }}
            url={url}
            columns={columns}
            sheetName={"路线技术等级薄弱点列表"}
          />
        ) : (
          ""
        )}
      </Space>
    }
  ></Card>;
};

注意事项

render函数必须为箭头函数，否则导出报错, render:()=>{}
render函数里的参数除形参value，其他参数必须要带window. 否则线上导出报错，因为打包后代码压缩，变量名称会被改变.例如window.areaDict

src/exampleForExport.js

1const columns = [
2        {
3            title: '行政区划',
4            dataIndex: 'AreaCode',
5            key: 'AreaCode',
6            align: 'center',
7            width: 200,
8            sorter: true,
9            filterIcon: (filtered) => (
10                <FilterOutlined style={{ color: filtered ? 'red' : undefined }} />
11            ),
12            filters: transformTreeData(areaDict),
13            // 1.render函数必须为箭头函数，否则导出报错
14            // 2.render函数里的参数除形参value，其他参数必须要带window. 否则线上导出报错，因为打包后代码压缩，
15            // 变量名称会被改变
16            render: (value) => {
17                const data = window.transformTreeDataToDict(window.areaDict)
18                const result = value ? data[value] : ''
19                return result
20            },
21        },
22       
23       
24    ]

ON THIS PAGE

常用工具#

表格导出#

导出excel#

导出excel示例#

注意事项#

常用工具

表格导出

导出excel

导出excel示例

注意事项