只需要在select上设置一个属性即可.
labelInValue 设置为true 就可以.
选中项的 label 会被包装到 value 中传递给
onChange
等函数，此时 value 是一个对象。
当然,用getFieldsValue 也同样会被同时获取到.
当然了,如果是在getFieldDecorator 中设置的话 ,需要在initialValue中设置好相关的值才行,比如
<FormItem {...formItemLayout} label="项目类别">
getFieldDecorator('categoryId', {
initialValue: {key:""},
rules: [{
required: true, message: '此项为必选',
<Select labelInValue disabled={t.props.editAble} style={{width: 120, marginTop: 5}} size={config.size}>
<Select.Option value="">全部</Select.Option>
<Select.Option value="cat1">类别1</Select.Option>
<Select.Option value="cat2">类别2</Select.Option>
<Select.Option value="cat3">类别3</Select.Option>
<Select.Option value="cat4">类别4</Select.Option>
</Select>
</FormItem>
只需要关注initialValue那一块便可以,其它的和正常书写代码内容是一样的,不然的话,会一直报错
为什么80%的码农都做不了架构师？>>> ...
<Form.Item
label
=作用对象>
{getFieldDecorator('targetId', { initial
Value
: this.state.targetId }, {
rules: [{
required: false,
message: '作用对象'
<
Select
placeholder=请选择作用对象>
{targetList.map(entity => <Option key={enti
Ant Design Vue
select
中
label
-in-
value
的使用，以及动态设置
select
默认
值
，默认
值
为空时placeholder不显示的问题
在做表单
提交
时，我这边的需求是需要将
select
组件中的key作为id，
value
作为name传到后台。由于
select
组件默认无法同时获得key和
value
，所以，使用
label
-in-
value
属性来将key和
value
包装成
一个
object来
获取
。
<a-
select
label
-in-
value
:disabled="disabled"
show-search
v-decorat
是否把每个选项的
label
包装到
value
中，会把
Select
的
value
类型从 string 变为 {key: string,
label
: ReactNode} 的格式
对于需要保存下拉框 描述的需求，很好用。
因为一般接口返回的
值
都叫name和code，但是
antd
的级联选择中指定了属性名叫
label
和
value
，所以我们需要改变参数名，将接口的返回
值
传入下面函数
function convertKey(arr){
let tempString = JSON.stringify(arr);
let jsonObject = {name:"
label
",code:"
value
"}
for(var key in jsonObject ){
var reg = `/"${key}":/
一个
下拉选项，平常只需传
value
值
，但是后端需要
label
和
value
值
，这个问题给组件加
一个
:
label
In
Value
='true’属性就可以了，但会引发其它问题
<a-form-item
label
="销售">
<a-
select
@change='saleChange' :
label
In
Value
='true' v-decorator="['sale_id' , { rules: [{ required: true, message: '请选择
Antd
esign-vue AutoComplete自动完成分类查询功能官方例子效果实现
最近在业务里遇到需要在输入框输入的同时，要有搜索提示的需求。因为笔者最近都在做
Antd
esign的项目，所以就用这个框架来处理，首先来看一下效果：
首先
Antd
esign自己的官网就有示例.
其实这个例子已经满足我们80%的需求了，我们只要在他的基础上增加搜索功能就好了。
1.首先查看文档，AutoComplete有
一个
事件方法：
所以我们就在这个事件上去做搜索功能，完整HTML代码：
react项目,使用了
antd
和ProTable，因为某个
select
数据后端接口同时需要
value
和name,所以使用了
label
In
Value
属性.
但这直接导致validateField不能校验该字段必填。因为未填写该字段，表单
提交
的也是个空对象，所以校验不到。多个阶段console log,我发现第一次进入页面的时候所有校验都会触发 因为这个时候是undefined
但是在选择
一个
值
之后再删除 设置过
label
In
Value
的属性的字段 直接就变成{ }了
于是在onChange的时候 把
值
恢
<
Select
default
Value
={options[0].
value
}>
{options.map(option => (
<Option key={option.
value
}
value
={option.
value
}>{option.
label
}</Option>
</
Select
>
其中，options 是
一个
包含所有选项的数组，每个选项包含
一个
value
和
label
属性。default
Value
属性设置为 options[0].
value
，即第
一个
选项的
value
值
。
