ant-design-pro-utils

Utility functions for Ant-design-pro

Usage no npm install needed!

<script type="module">
  import antDesignProUtils from 'https://cdn.skypack.dev/ant-design-pro-utils';
</script>

README

ant-design-pro-utils

一系列适用于 ant-design-pro 脚手架的工具方法。

Installation & Usage

首先通过 npm 安装

npm install ant-design-pro-utils

然后你可以通过两种方式使用：

  1. import { columnRenderWrapper } from 'ant-design-pro-utils'

  2. import columnRenderWrapper form 'ant-design-pro-utils/columnRenderWrapper

API

Table of Contents

columnRenderWrapper

安全的 Table.column.render 包裹方法

使你不必在 render 里面写任何容错处理，如果 render 方法报错或返回为空值时（如 '',undefined,null,false）返回 defaultValue （默认为 -）

Parameters

  • cbOrPath (function | string) 渲染函数或路径
  • options {defaultValue: string, errorCb: function} 配置项，可自定义 defaultValue 或 errorCb

Examples

// 第一种用法：不接受任何参数，返回 dataIndex 对应的值，如果为空值则返回 defaultValue
{
  dataIndex: 'foo',
  render: columnRenderWrapper(),
}
// 第二种用法：接收一个 path，和 dataIndex 用法一致，这种方法可以不用指定 dataIndex
{
  key: 'foo',
  columnRenderWrapper('foo.bar'),
}
// 第三种用法：指定渲染函数，函数接收的参数和 render 一致
{
  key: 'users',
  dataIndex: 'users',
  columnRenderWrapper(users => {
    // 你不需要判断 users 是否是数组类型，如果 users 类型不匹配会显示 defaultValue，或你可以指定 errorCb 自定义处理方法
    return users.map(user => user.name).join('、');
  })
}
// 以上三种用法都可以指定第二个参数 options，定义 defaultValue 或 errorCb

renderWrapper

安全的渲染包裹方法

如果你的渲染方法报错或返回值为空值，则返回 defaultValue 通常用在 Antd Descriptions 组件中。

Parameters

  • cbOrValue (any | function) 你的渲染函数或值
  • options {defaultValue: string, errorCb: function} 配置项，可以自定义 defaultValue 或 errorCb

Examples

// 第一种用法：直接传入要显示的变量
<Descriptions.Item>{renderWrapper(name)}</Descriptions.Item>
// 第二种用法：传入一个回调函数
<Descriptions.Item>{renderWrapper(() => user.name)}</Descriptions.Item>