一.antd vue中的a-select的动态加载列表a-select-option

1.既然是动态加载选择框的列表a-select-option,必然存在获取后台数组，并循环
后台数组格式：

数组(例):arr=[
{id:1,name:'数组1',num:2,provice:'qqqqq'},
{id:2,name:'数组2',num:3,provice:'qqqqq'},
{id:3,name:'数组3',num:4,provice:'qqqqq'},
]

获取数组的处理方法：
重点：当获取后台的数据后，想从中取得几项数据，且组成一个数组，长度一样
arr=[
{id:1,name:‘数组1’},
{id:2,name:‘数组2’},
{id:3,name:‘数组3’},
]
1.对数组进行循环，可以拿到数组中的每一条数据

for(var i=0;i<arr.length;i++){。。。}

2.在可以拿到每一条数据的时候，取出其中的每一条数据的几项，并赋值给某一个对象的属性，每一个循环，都会有一个空对象，空对象中存在想获取的几项数据，且在每次循环后，push到一个新的数组中。这样当循环完成后，就会拿到一个对象数组
this.cityList=[obj1,obj2,obj3…]

this.cityList=[];  //定义的新数组
  for(var i=0;i<arr.length;i++){
               var obj={};
               obj.id=arr[i].id;
               obj.name=arr[i].name;
               //obj={id:'',name:''}
               this.cityList.push(obj);
            }

3.处理方法函数

getCityData(){
        postAction('xx/xx/xx').then((res)=>{
          if(res.success){
            console.log(res)
            var obj={};
            var arr=res.result;
            this.cityList=[];
             for(var i=0;i<arr.length;i++){
               var obj={};
               obj.id=arr[i].id;
               obj.name=arr[i].name;
               this.cityList.push(obj);
            }
            console.log(this.cityList)
          }else{
            this.$message.info(res.message);
          }
        })
      },

4.对a-select列表进行循环加载

<a-select
 :allowClear="true"
  style="width: 100%"
  placeholder="请选择所在地"

  v-decorator="['address',validatorRules.address]">
  <a-select-option v-for="(role,roleindex) in cityList" :key="role.id" :value="role.name">    //cityList是获取的新数组
    {{ role.name }}
  </a-select-option>
</a-select>

二.a-select的选择项a-selct-option的回显(后台返回value，选择项就选中某一项value)

1.场景：后台管理系统
点击新增，添加form表单数据，点击编辑，form表单回显数据
表单项代码：

<a-form-item
 :labelCol="labelCol"
     :wrapperCol="wrapperCol"
     label="985">
     <a-select :allowClear="true" placeholder="请选择是否985" v-decorator="[ 'isOne', validatorRules.isOne]">
       <a-select-option value="">请选择</a-select-option>
       <a-select-option value="1">是</a-select-option>
       <a-select-option value="0">否</a-select-option>
     </a-select>
</a-form-item>

当获取到后台数据后，进行回显，一般来讲，后台将会返回：

  1. isOne:“1”—或者—isOne:“0”
  2. isOne:1—或者—isOne:0
    第一种返回的是一个字符串string，第二个返回的是一个数字number
    当返回的数据和a-select-option中的value值不一样时，将不会显示。
    value="…"------其中的value值是字符串string
    返回的isOne:1------其中的对应的value值是一个数字number
  3. 解决方法
    直接将返回的数据变成字符串即可，每当点击某一行数据进行编辑时，都会进行数据的回显
edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);  //table数据，antd vue中的table组件自带的参数，即table每一行的对象record
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'isOne'))
         }）
         if(record.id){  //当存在id时，证明就是在编辑列表数据，没有id时，就证明在新增数据
         this.model.isOne= this.model.isOne.toString();//直接变成字符串，使之符合value的值的类型
         }
}