基本使用
ValueType 的值
antd pro的valueType可选的值如下：
- text：普通文本。
- money：金钱类型。
- option：选项类型。
- date：日期类型。
- dateTime：日期时间类型。
- time：时间类型。
- index：序号类型。
- indexBorder：带边框的序号类型。
- progress：进度类型。
- percentage：百分比类型。
- digit：数字类型。
- avatar：头像类型。
- code：代码类型。
- textarea：多行文本类型。
- jsonCode：JSON代码类型。
- json：JSON类型。
- image：图片类型。
- select：下拉框类型。
- status：状态类型。
- badge：徽标类型。
- checkbox：复选框类型。
- radio：单选框类型。
- rate：评分类型。
- slider：滑块类型。
- tagSelect：标签选择类型。
- transfer：穿梭框类型。
- treeSelect：树形选择类型。
自定义 ValueType
antd pro 的 valueType 可以自定义。可以通过自定义组件来实现自定义 valueType。具体步骤如下：
- 创建一个自定义组件，组件需要包含一个 render 函数，返回该组件的 DOM 结构。
- 在 ProTable 的 columns 属性中，将 valueType 属性设置为自定义组件的名称。
- 将自定义组件作为参数传递给 ProTable 组件。
例如，如果想要创建一个自定义的 valueType 叫做 myType，可以按照以下步骤进行：
//定义自定义组件
const MyType = (props) => {
return (
<span>
{props.text}
</span>
);
};
//在ProTable的columns属性中将valueType设置为myType
const columns = [
{
title: 'Name',
dataIndex: 'name',
valueType: 'myType'
},
{
title: 'Age',
dataIndex: 'age'
},
{
......
}
];
//将自定义组件作为参数传递给ProTable组件
<ProTable
columns={columns}
valueTypeMap={{
myType: MyType
}}
/>这样，在表格中显示 myType 的数据时，就会渲染出自定义组件 MyType 的内容。
例子
valueTypeMap: {
link: {
render: (text) => <a>{text}</a>,
renderFormItem: (text, props) => (
<Input placeholder="请输入链接" {...props?.fieldProps} />
),
},
tags: {
render: (text) => {
return (
<>
{[text].flat(1).map((item) => (
<Tag key={item.value}>{item.label}</Tag>
))}
</>
);
},
renderFormItem: (text, props) => <TagList {...props} {...props?.fieldProps} />,
},
},