ant-design-vue之form表单选中select使⽤ant-design-vue 之form表单选中select使⽤
01) ⼀般select
@change="handleChangeFei" 可以获取key 和 val (默认有2个参数)
handleChangeFei(value,option) {
console.log(value, option.key,option.data.key); // 史记, 02 , 02
},
  demo：选中后获取key 和 val
<template>
<div>
<a-form  :form="form">
<a-form-item label="图书">
<a-select placeholder="请选择" @change="handleChangeFei">
<a-select-option v-for="items in select_data" :key="items.select_key" :value="items.select_val">
{{items.select_val}}
</a-select-option>
</a-select>
</a-form-item>
</a-form>
</div>
</template>
<script>
/
* 这是ant-design-vue */
import Vue from 'vue'antdesignvue 表格合计
import Antd, { message,Select } from 'ant-design-vue'  //这是ant-design-vue
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd);
/* 这是ant-design-vue */
const select_data = [
{select_key: "01", select_val: "论语"},
{select_key: "02", select_val: "史记"},
{select_key: "03", select_val: "左传"},
{select_key: "04", select_val: "汉书"},
{select_key: "05", select_val: "战国策"},
];
export default {
components:{},
data() {
return {
form: this.$ateForm(this),// form 表单
select_data,
}
},
methods: {
handleChangeFei(value,option) {
console.log(value, option.key,option.data.key); // 史记, 02 , 02
},
},
};
</script>
<style scoped>
</style>
View Code
02) 包装过的select
使⽤  :form="form"  和  v-decorator 包装过的select
label-in-value 获取key和label,  initialValue 设置默认值
web_decorator_sex: ['web_decorator_sex',{rules: [{ required: true, message: '请选性别' }]}],
web_decorator_sex_02: ['web_decorator_sex_02', {initialValue: {key: "2", label: "⼥"}, rules: [{required: true, message: '请选性别'}]}] *** 注意加了:form="form" 观察  default-value 属性在的变化 ***
1. 你不再需要也不应该⽤ onChange 来做同步，但还是可以继续监听 onChange 等事件。
2. 你不能⽤控件的 value defaultValue 等属性来设置表单域的值，默认值可以⽤ getFieldDecorator 或 v-decorator ⾥的 initialValue。
3. 你不应该⽤ v-model，可以使⽤ this.form.setFieldsValue 来动态改变表单值。
官⽅解释:
demo: 默认选中⼥，选中获取key和label
这只默认的时候要  {key: "2", label: "⼥"}  这样格式，否则 v-decorator 获取数据会少
<template>
<div>
<h3>默认选中⼥</h3>
<h3>选中获取key和label</h3>
<a-form>
<a-form-item label="性别">
<a-select label-in-value  :default-value="{key:'2', label: '⼥'}" @change="handleChange">
<a-select-option  v-for="items in select_data"
:key="items.select_key">{{items.select_val}}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="性别_02">
<a-select label-in-value :default-value="{key:'2', label: '⼥'}" v-decorator="web_decorator_sex"  @change="handleChange">
<a-select-option  v-for="items in select_data"
:key="items.select_key">{{items.select_val}}
</a-select-option>
</a-select>
</a-form-item>
</a-form>
<hr><hr>
<a-form :form="form">
<a-form-item label="性别">
<a-select label-in-value  :default-value="{key:'2', label: '⼥'}" @change="handleChange">
<a-select-option  v-for="items in select_data"
:key="items.select_key">{{items.select_val}}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="性别_02">
<a-select label-in-value v-decorator="web_decorator_sex_02"  @change="handleChange">
<a-select-option  v-for="items in select_data"
:key="items.select_key">{{items.select_val}}
</a-select-option>
</a-select>
</a-form-item>
</a-form>
</div>
</template>
<script>
/* 这是ant-design-vue */
import Vue from 'vue'
import Antd, { message,Select } from 'ant-design-vue'  //这是ant-design-vue
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd);
/* 这是ant-design-vue */
const select_data = [
{select_key: "1", select_val: "男"}, // 这⾥的select_key 使⽤字符串，其他地⽅也要是字符串
{select_key: "2", select_val: "⼥"},
];
export default {
data() {
return {
form: this.$ateForm(this),
select_data,
web_decorator_sex: ['web_decorator_sex', {rules: [{required: true, message: '请选性别'}]}],                web_decorator_sex_02: ['web_decorator_sex_02', {
initialValue: {key: "2", label: "⼥"},
rules: [{required: true, message: '请选性别'}]
}]
}
},
methods: {
handleChange(value) {
console.log(value);
console.log(value.key,"__",im());
}
},
};
</script>
<style scoped>
</style>
View Code