ant design+vue中用选择框v-decorator时同时传递value和name的值

接触ant design坑还是要踩的,留个后面的人借鉴一下

用v-decorator和set配合,在编辑表格的时候可以拿到后端传递的初始值选择到弹框页面上
ant design+vue中用选择框v-decorator时同时传递value和name的值_第1张图片
ant design+vue中用选择框v-decorator时同时传递value和name的值_第2张图片
展示的弹框是这样的:
ant design+vue中用选择框v-decorator时同时传递value和name的值_第3张图片
但是对于省市区联动来说,我们需要根据省的id来获取市,根据市的id来获取县,不能用v-model进行绑定选择框选择的值,这里我们需要@blur的属性,失去焦点的时候获取值,这里我们没有用labelInValue 属****性
(为什么不用呢参考https://www.cnblogs.com/ruoshuisanqian/p/10485392.html)
而是直接从接口中活动{name:‘北京’,id:‘1212233’}

<a-form-item
        label="省"
        :label-col="{span:5}"
        :wrapper-col="{span:12}"
        >
        <a-select
        @blur="getProviceChangeTwo"
         v-decorator="[
        'province',
         {rules:[{required:true,message:'请填入省份'}]}]"
        >
        <a-select-option v-for="item in provinceData" :key="item.provinceId" :name ='item.name'  :value="JSON.stringify(item)">{{item.name}}</a-select-option>
        </a-select>

利用 @blur="getProviceChangeTwo"在在选择省后失去焦点的时候请求传递省id给市

:value="JSON.stringify(item)"将对象转化为json字符串,可以拿到id和name两个值
然后我们blur拿到的就是一个字符串

//编辑案件的获取
     getProviceChangeTwo(){
      this.province = this.form.getFieldValue('province');
      console.log(JSON.parse(this.province).provinceId)
   
      let params={provinceId:JSON.parse(this.province).provinceId}
      getCaseCityData(params).then((res) =>{
          this.cityData = res.data
      })
    },

通过JSON.parse()将json字符串转化为对象,并且拿到里面的id值,然后把值传递给请求市的接口拿到某省对应的某市的值

分割线------
最后我们在提交表格的时候,需要省的id和名称,市的id和名称

 updateHandleSubmit (e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          this.updatedata = values
          this.updatedata.city=JSON.parse(this.city).name
          this.updatedata.cityId = JSON.parse(this.city).cityId
          this.updatedata.provinceId = JSON.parse(this.province).provinceId
          this.updatedata.province = JSON.parse(this.province).name
          this.updatedata.countyId = JSON.parse(this.county).countyId
          this.updatedata.county = JSON.parse(this.county).name
          this.updatevisible = false;
          this.form.resetFields()//提交完后清空表单内容
          // this.adddata.startTime = this.addStartTime
          // this.adddata.endTime = this.addEndTime
        }
      });

利用JSON.parse()拿到值就可以了,
此代码还需找到最优的方法,仅供参考

你可能感兴趣的:(ant design+vue中用选择框v-decorator时同时传递value和name的值)