跳转到内容

ProComponents v3 对齐迁移 ​

本轮行为参考 @ant-design/pro-components@3.1.15-7,固定源码提交为 3bf43278d39f2d31489749132982488f57a9eb5e。Vue 继续使用插槽、class、v-model 和组件 ref。各组件实际支持的属性见对应 API 页。

类名与语义样式 ​

默认公开类名使用 ant-pro-*,例如 ant-pro-card、ant-pro-table、ant-pro-form。原生 ConfigProvider 的 prefixCls="demo" 会生成 demo-pro-*;组件自身的 prefixCls 是完整组件前缀。

原来依赖 .antdv-next-pro__* 的业务样式需要迁移到公开类名,或者使用 classes。

vue
<ProCard
  title="用户"
  class="user-card"
  :classes="({ props }) => ({ title: props.title ? 'user-card-title' : '' })"
  :styles="{ body: { padding: '12px' } }"
/>

classes 和 styles 接受对象或 ({ props }) => 对象。旧 classNames 为兼容别名;同一部位同时设置时 classes 优先。根 class 仍用于容器,表格行类名使用原生 rowClassName。

ConfigProvider 与 ProConfigProvider ​

原生 ConfigProvider 控制语言、方向、前缀、主题算法、全局 token 和原生组件 token;ProConfigProvider 提供 Pro token、显式 intl 和自定义 valueType。

vue
<a-config-provider
  :locale="locale"
  :theme="{
    token: { colorPrimary: '#1677ff' },
    components: { Card: { bodyPadding: 12 } },
  }"
>
  <ProConfigProvider :token="{ boxShadow: '0 8px 24px #0002' }">
    <ProCard title="主题卡片" box-shadow>内容</ProCard>
  </ProConfigProvider>
</a-config-provider>

theme.components.Result 定制原生 Result。Pro 扩展 token 使用 ProConfigProvider.token,不使用 theme.components.ProTable 等不存在的原生配置键。仅设置原生 locale 即可选择对应的 Pro 内置语言;显式 ProConfigProvider.intl 优先。

自定义字段注册使用 valueTypeMap 的 render 和 formItemRender。旧 renderFormItem 注册键仅作兼容;列属性的迁移规则见下文。

列回调 ​

表格列的 render 使用 v3 参数:

ts
const columns: ProColumns<User>[] = [
  {
    title: '姓名',
    dataIndex: 'name',
    render: (dom, record, index, action, schema) => {
      return h('a', { onClick: () => action.reload() }, record.name)
    },
  },
]

原来的 render(value, { record }) 需要改写。第一个参数为已格式化的显示节点;原始值可通过 record 和 schema.dataIndex 读取。分组列使用 children。回调不会根据函数参数数量自动切换语义。

默认行为 ​

项目对齐后的行为保留旧页面表现的显式配置
表格搜索默认折叠search: { defaultCollapsed: false }
全屏工具默认隐藏options: { fullScreen: true }
EditableProTable默认 single,已有编辑行时拒绝开启另一行editable: { type: 'multiple' }
组合 ProForm默认 verticallayout="horizontal"

搜索提交先走表单校验;校验失败不调用数据请求。single 模式会保留当前草稿,应用应先保存或取消当前行。

组合表单与 schema 表单 ​

ProForm 使用字段子组件,BetaSchemaForm / SchemaForm 使用 columns。ModalForm、DrawerForm、QueryFilter、LightFilter 继续接收 schema 配置,也可组合字段。

vue
<ProForm :initial-values="{ name: 'Ada' }" :on-finish="save">
  <ProFormText name="name" label="姓名" :rules="[{ required: true }]" />
</ProForm>

需要等待业务结果的提交必须使用可返回结果的 onFinish 回调。ModalForm 和 DrawerForm 等待回调完成:只有 true 关闭;false、无返回值或抛错保留弹层和值。

ts
async function save(values: Record<string, unknown>) {
  await api.save(values)
  return true
}
vue
<ModalForm v-model:open="open" :on-finish="save">
  <ProFormText name="name" label="姓名" />
</ModalForm>

不要用没有返回值的通知事件承担关闭判断。步骤表单同样等待每一步的回调结果,具体前进与最终提交规则见 ProForm 文档。

范围 ​

本轮包括 Provider、字段体系、组合表单、ProList、ProDescriptions 和表格辅助组件。ProSkeleton、LoginForm/LoginFormPage、PageContainer/ProLayout、StatisticCard/CheckCard 及其新组件族不在本轮建设范围。

基于 MIT 许可发布