a-select设置默认值(Ant Design&Vue)

以下方式都不好用：
defaultValue
default-value=“lucy”
:default-value="{ key: ‘lucy’ }"

网上查询v-model方法，也不好用。

<a-selectplaceholder="请选择入库类型"v-model="queryParam.status"><a-select-option value="4" > 退料入库 </a-select-option><a-select-option value="5"> 退货入库 </a-select-option></a-select>data() {return {queryParam: { status: 4},}
}

前台报出警告：
getFieldDecorator will override value, so please don’t set value and v-model directly and use setFieldsValue to set it.

正确写法使用getFieldDecorator：

<a-selectv-decorator="['source', validatorRules.source]"@change="changeType"placeholder="请选择入库类型":disabled="typeDisabled"><a-select-option value="4" > 退料入库 </a-select-option><a-select-option value="5"> 退货入库 </a-select-option>
</a-select>created() {this.form.getFieldDecorator('source', {initialValue: '4'})},

============================
后来查看了官方文档，内容更加详细准确。
参见：https://www.antdv.com/components/form-cn/#API

Form 表单
具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素

创建表单
Form.create(options) | this.$form.createForm(this, options)

经过 Form.create 包装的组件将会自带 this.form 属性，this.form 提供的 API 如下：

注意：使用 getFieldsValue getFieldValue setFieldsValue 等时，应确保对应的 field 已经用 getFieldDecorator 或 v-decorator 注册过了。（本人理解组件添加v-decorator属性）

getFieldDecorator
用于和表单进行双向绑定，单文件 template 可以使用指令v-decorator进行绑定，
设置初始值代码也可以写成以下形式：

<a-form :form="form"><a-form-item label="入库类型" :labelCol="labelCol" :wrapperCol="wrapperCol"><a-selectv-decorator="['source',  { initialValue: '4' } ,validatorRules.source]"@change="changeType"placeholder="请选择入库类型":disabled="typeDisabled"><a-select-option value="4" > 退料入库 </a-select-option><a-select-option value="5"> 退货入库 </a-select-option></a-select></a-form-item></form>

【注意】
this.form.getFieldDecorator(id, options) 和 v-decorator="[id, options]"

经过 getFieldDecorator或v-decorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：

1.你不再需要也不应该用 onChange 来做同步，但还是可以继续监听 onChange 等事件。
2.你不能用控件的 value defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。
3.你不应该用 v-model，可以使用 this.form.setFieldsValue 来动态改变表单值。

这解释了文章开头，各种设置方式不好用的原因。

a-select设置默认值相关推荐

给select设置默认值，在option在页面上已经写死的情况下
2019独角兽企业重金招聘Python工程师标准>>> 从后台传来数据 request.setAttribute("time", time), time有year ...
beetl模板引擎中for循环语句（包含select设置默认值）和if判断语句
<#select id="salesOfficesId" name="售楼处" > @for(offices in officesLi ...
html5下拉列表默认值,element-ui中的select下拉列表设置默认值方法_简单_前端开发者...
element-ui中的select下拉列表如何设置默认值? 在element-ui的运用中,涉及到了select下拉列表.项目中需要将select的默认值给展示出来那如何修改呢? 上element ...
html下拉框设置默认值_html 里select 下拉列表中设置默认值怎么写
用户提问 1 2 3 4 5 6 7 8 9 推荐答案设置下拉列表框的默认值:使用关键字selected < select na ...
html下拉列表初始值为空,html 里select 下拉列表中设置默认值怎么写？
设置下拉列表框的默认值:使用关键字selected < select name = "pronvince"> < option value ="SH&q ...
vue elementUI select下拉框设置默认值
关于element select框默认值赋值不成功问题,注意两点: v-model里面的数据和遍历出来value值数据类型不一样.!!!! (例:item.provinces类型是number,pro ...
mysql关于时间的面试题,mysql时间设置默认值MySQL常见面试题
1.limit(选出10 到20 条) select * from students order by id limit 9,10; 2.MySQL 会使用索引的操作符号 =,>,=,betwe ...
存储过程+调用存储过程+无/带参的存储过程+in参数+out参数+int out参数+为参数设置默认值...
存储过程 1存储过程是一组为了完成特定功能的SQL语句集 2存储过程编译后存储在数据库中 3执行存储过程比执行存储过程封装的SQl语句集更有效率 4不能指定declare关键字 5: OUT 和 IN ...
EasyUI Combobox 设置默认值
/** *绑定运营商,设置默认值, 显示CMCC, 传值1 */ $('#operatingId').combobox({ url:'data_url', valueField:'id', textF ...
thinkphp实现动态下拉菜单（补充设置默认值）
在下拉菜单中的选项用动态方式添加提高项目可扩展性 HTML部分 <span style="font-family:KaiTi_GB2312;font-size:18px;" ...

a-select设置默认值

a-select设置默认值(Ant Design&Vue)

a-select设置默认值相关推荐

最新文章

热门文章