极客观点
项目管理
HarmonyOS
如图所示，当前有一个StepsForm表单，代码如下（基本就是官网的示例修改的）
const Demo: React.FC = () => {
const Option = [
{
key: '1',
value: '111',
label: '个人'
},
{
key: '2',
value: '222',
label: '合作'
},
]
const waitTime = (time: number = 100) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, time);
});
};
return (
<>
<ProCard>
<StepsForm<{
name: string;
}>
onFinish={async (values) => {
console.log(values);
await waitTime(1000);
message.success('提交成功');
}}
formProps={{
validateMessages: {
required: '此项为必填项',
},
}}
submitter={{
render: (props) => {
if (props.step === 0) {
return (
<>
<Button>
取消
</Button>
<Button type="primary" onClick={() => props.onSubmit?.()}>
下一步
</Button>
</>
);
}
if (props.step === 1) {
return (
<>
<Button type="primary" key="pre" onClick={() => props.onPre?.()}>
上一步
</Button>
<Button key="goToTree">
取消
</Button>
<Button type="primary" key="goToTree" onClick={() => props.onSubmit?.()}>
下一步
</Button>
</>
)
}
return (
<>
<Button type="primary" key="pre" onClick={() => props.onPre?.()}>
上一步
</Button>
<Button key="goToTree">
取消
</Button>
<Button type="primary" key="goToTree" onClick={() => props.onSubmit?.()}>
下一步
</Button>
</>
)
},
}}
containerStyle={{textAlign:'center'}}
>
<StepsForm.StepForm<{
name: string;
}>
name="base"
title="创建实验"
layout='horizontal'
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}
onFinish={async ({ name }) => {
console.log(name);
await waitTime(2000);
return true;
}}
>
<Row gutter={48}>
<Col span={12}>
<ProFormText
name="titleState"
label="语文"
width="md"
placeholder="请输入"
/>
<ProFormSelect
name="assetType"
label="类型"
width="md"
// placeholder="请选择"
options={Option}
/>
<ProFormText
name="originTitleUnit"
label="英语"
width="md"
placeholder="请输入"
/>
</Col>
<Col span={12}>
<ProFormText
name="useState"
label="物理"
width="md"
placeholder="请输入"
/>
<ProFormText
name="location"
label="生物"
width="md"
placeholder="请输入"
/>
<ProFormText
name="currentTitleUnit"
label="化学"
width="md"
placeholder="请输入"
/>
</Col>
</Row>
</StepsForm.StepForm>
<StepsForm.StepForm<{
checkbox: string;
}>
name="checkbox"
title="设置参数"
>
<ProFormCheckbox.Group
name="checkbox"
label="迁移类型"
width="lg"
options={['结构迁移', '全量迁移', '增量迁移', '全量校验']}
/>
<ProForm.Group>
<ProFormText name="dbname" label="业务 DB 用户名" />
<ProFormDatePicker name="datetime" label="记录保存时间" width="sm" />
<ProFormCheckbox.Group
name="checkbox"
label="迁移类型"
options={['完整 LOB', '不同步 LOB', '受限制 LOB']}
/>
</ProForm.Group>
</StepsForm.StepForm>
<StepsForm.StepForm name="time" title="发布实验">
<ProFormCheckbox.Group
name="checkbox"
label="部署单元"
rules={[
{
required: true,
},
]}
options={['部署单元1', '部署单元2', '部署单元3']}
/>
<ProFormSelect
label="部署分组策略"
name="remark"
rules={[
{
required: true,
},
]}
initialValue="1"
options={[
{
value: '1',
label: '策略一',
},
{ value: '2', label: '策略二' },
]}
/>
</StepsForm.StepForm>
</StepsForm>
</ProCard>
</>
)
}
export default Demo
我希望底部的按钮能居中，为此使用containerStyle设置了容器样式containerStyle={{textAlign:'center'}}，结果是底部按钮居中了，但是我的ProFormSelect中的文字也居中了，看起来很怪异，如下图所示
请问有没有什么办法能使按钮居中但不影响ProFormSelect呢？
这是你们自己把
Steps和Form组装起来的组件吧？？那
Button的渲染也可以用Form.Item包裹起来呀，这样就能控制labelCol和wrapperCol让他们居中了。或者渲染的时候用
div包裹起来。这样的
Button也是居中的吧。