表单中 输入某一项 回显其他项

管理系统中，我们经常需要录入信息，就避免不了多个模块要录入相同的信息，比较麻烦

这里我们只输入姓名，然后自动填入身份证号和性别

方法一：步骤

1、给input绑定change事件，然后监听input输入的值

 <a-form-item label="姓名">
                        <a-input @change="onChange"
                                 placeholder="请输入姓名"
                                 v-decorator="[
                'name',
                {
                  initialValue: model.name
                }
              ]" />
                    </a-form-item>

2、在change事件里请求接口，接口根据输入的值返回该条信息

  // demo （输入名称回显个人基本信息）
        onChange(e) {
            console.log(e.target.value);
            dibootApi
                .get("/manpowerRecruit/list")
                .then((res) => {
                    console.log(res.data[0]);
                    this.$set(this.model, "idNum", res.data[0].sfzh);
                    this.$set(this.model, "sex", res.data[0].xbLabel);
                    // this.model.idNum = baseData[0].sfzh;
                })
                .catch((res) => {
                    this.$message.error(res.msg);
                });
        },

3、把接口返回的信息回显

这种方法每一次input的value改变都会请求接口，感觉比较麻烦

方法二：步骤

1、给input绑定change事件，然后监听input输入的值

 <a-form-item label="姓名">
                        <a-input @change="onChange"
                                 placeholder="请输入姓名"
                                 v-decorator="[
                'name',
                {
                  initialValue: model.name
                }
              ]" />
                    </a-form-item>

2、加载页面的时候就请求接口，在change事件里利用input的value值过滤出自己需要的数据

  // demo （输入名称回显个人基本信息）
        onChange(e) {
            console.log(e.target.value);
            dibootApi
                .get("/manpowerRecruit/list")
                .then((res) => {
                    //从返回的数据中过滤出相同姓名的  这样就不用每次请求接口了
                    let baseData = res.data.filter((item) => {
                        return item.recruitName === e.target.value;
                    });
                    console.log("baseData:", baseData);
                    console.log("sfzh:", baseData[0].sfzh);
                    //数据回显
                    this.$set(this.model, "idNum", baseData[0].sfzh);
                    this.$set(this.model, "sex", baseData[0].xbLabel);
                })
                .catch((res) => {
                    this.$message.error(res.msg);
                });
        },

 3、把接口返回的信息回显

ps:这里使用  this.model.idNum = baseData[0].sfzh; 无法回显数据

所以使用set 

set用法

解决数据没有被双向绑定我们可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名。

this.$set(原数组, 索引值（属性）, 需要赋的值)

 详情：  vue中$set用法详细讲解_Oralinge的博客-CSDN博客_$set方法