element-ui的三级联动使用及配置

<el-cascader
          :props="reginCascaderProps"
           v-model="ruleForm.transact"
           :options="options"
           @change="handleChange">
</el-cascader>
                       

 options: [],
 reginCascaderProps: {
        label: "districtName",   //接口的label对应的数据
        value: "districtId"      //接口的value对应的数据
 },

  marketPersonal.getCityList().then(res=>{   //获取城市接口
       this.options = res
  }).catch(err=>{this.$message.error(err.message || '列表请求出错！')})

以下是三级联动的数据回显

<el-form-item label="办理地区" prop="cityId" >
            <div class="block">
                 <el-cascader
                    :props="reginCascaderProps"
                     v-model="ruleForm.cityId"
                     :options="options"
                      @change="handleChange"></el-cascader>
             </div>
 </el-form-item>

 ruleForm: {cityId:''}

今天在修改bug的时候遇到了一个问题,就是三级联动的数据回显问题.

因为三级联动绑定的是一个数组,但是回显的数据是字符串,所有回显不上,只要转为数组即可

 if(!Array.isArray(item.pestKind)){

      item.pestKind = item.pestKind.split('-');

 }

this.$nextTick(() => {
          that.form.setFieldsValue(pick(item, 'pestKind', 'hostPlant', 'dangerPart',                     
          'dangerState', 'landType', 'pestPath', 'botanyPath', 'path', 'memo'))
});


pick方法的作用
var object = { 'a': 1, 'b': '2', 'c': 3 };

_.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }