-
-
Notifications
You must be signed in to change notification settings - Fork 3.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
建议 Form 组件 提供类似 labelWidth API 或优化 labelCol 和 wrapperCol #450
Labels
Comments
这是我自己的实现 import { Component, Prop } from 'vue-property-decorator'
import { Form } from 'ant-design-vue';
import { IFormProps } from '@/types/form';
import { VC } from '@/VC-vue';
import { FormUtils } from '@/types/form-ref';
const props = [
'layout',
'formItems',
'labelCol',
'col',
'form',
'wrapperCol',
'itemStyle',
'initialValues'
]
@Component({ props })
class VcForm extends VC<IFormProps> {
@Prop() form!: FormUtils
get renderItem() {
const { labelCol, wrapperCol, initialValues, itemStyle, col, formItems } = this.$props
const form = this.form
return (formItems || []).map((props) => {
// tslint:disable-next-line:prefer-const
let { field, rules, initialValue, el } = props
let element = <a-input type={props.type} placeholder={props.placeholder} />
el && (element = typeof el === 'function' ? el(form) : el)
typeof rules === 'function' && (rules = rules(form))
if (field) {
initialValues && Object.keys(initialValues).includes(field) && (initialValue = initialValues[field])
element = form.getFieldDecorator(field, { rules, initialValue })(element)
}
const formItemProps = { props: { labelCol, wrapperCol, ...props } }
const colProps = { props: col }
const style = props.style || itemStyle
return (
<a-col {...colProps} style={style} >
<a-form-item {...formItemProps} >
{element}
</a-form-item>
</a-col>
)
})
}
render() {
return (
<a-row>
<a-form layout={this.$props.layout} >
{this.renderItem}
</a-form>
</a-row>
)
}
}
const FormInstance = Form.create({ props })(VcForm)
const IForm = ({ data }: FC<IFormProps>) => <FormInstance {...data} />
export default IForm |
<IForm
initialValues={props.initialValues || {}}
labelCol={{ span: 6}}
wrapperCol={{ span: 13 }}
formItems={[{
field: 'title',
label: '标题',
placeholder: '标题'
}, {
field: 'time',
label: '起止时间',
el: <a-date-picker />
}, {
field: 'doc',
label: '目标描述',
el: () => <a-textarea placeholder='Basic usage' rows={4} />
}, {
field: 'norm',
label: '衡量标准',
el: () => <a-textarea placeholder='请输入衡量标准' rows={4} />
}, {
field: 'user',
placeholder: '请描述你服务的客户, name',
label: (
<span>
客户<span style='color:rgba(0,0,0,.45)' > ( 选 填 )
<a-tooltip title='目标服务对象'><a-icon style='margin-left:5px;' type='info-circle' /></a-tooltip>
</span>
</span>
)
}, {
field: 'person',
placeholder: '请描述你服务的客户, name',
label: <span>邀评人<span style='color:rgba(0,0,0,.45)'>( 选 填 )</span> </span>
}, {
field: 'qz',
label: <span>权重<span style='color:rgba(0,0,0,.45)'>( 选 填 )</span></span>,
el: (<span><a-input placeholder='请填写' style='width:20%' /> %</span>)
}, {
field: 'mb',
label: '目标公开',
initialValue: '1',
el: (
<a-radio-group name='radioGroup'>
<a-radio value='1'>公开</a-radio>
<a-radio value='2'>部分公开</a-radio>
<a-radio value='3'>不公开</a-radio>
</a-radio-group>
)
}, {
wrapperCol: { offset: 6 },
el: (form) => (
<div>
<a-button
onClick={() => submit(form.getFieldsValue())}
v-html='提交'
type='primary'
style='margin-right:20px' />
<a-button v-html='保存' />
</div>
)
}]} /> |
13 tasks
This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What problem does this feature solve?
之前使用 element 等 组件库的时候,发现 labelWidth 这个属性体验舒适,自己写组件库的时候也发现这个属性提供继承和 item 优先级更高的 API 蛮好的。
我目前能想到的是因为 ant design react 的没有实现,然后 vue 的为了保持 api 一致所以也没有提供😂
说一个技术实现上的小点,当然您估计更清楚,用 provide 和 inject 可以很方便地实现这种 API。
当使用 labelCol 和 wrapperCol 进行表单布局的时候,发现了两个不适:
另外,一般情况下表单元素都是相同的 labelWidth 以保持布局对齐,所以 父组件(Form)提供控制 (Form.Item)的布局能力个人觉得蛮好的。
What does the proposed API look like?
建议提供 Form 直接管理表单布局的能力
The text was updated successfully, but these errors were encountered: