博客

需求：

将普通输入框改为输入数据后调用后端接口查询数据，在展示到页面上

核心代码：

<el-input v-model="sfzhm" clearable placeholder="请输入身份证号查找"></el-input>

return {
    sfzhm: null,
    // 后端接口的入参
      baseForm: {
        zjhm:"",
        ryzt: "",
        lzrq:"",
        zzryzp: ""
      },
}

Vue提供了一个watch方法去监听某些data内的数据变动，从而触发相应的操作，当需要在数据变化时执行异步或开销较大的操作时，watch方法是最有用的

watch:{
    sfzhm(curVal, oldVal) {
      console.log("curVal:",curVal)
  // 实现input连续输入，只发一次请求
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        console.log("sfzhm:",this.sfzhm)
        if(this.sfzhm != ''){
          //为调用后端接口赋值  
          this.queryForm.zjhm = this.sfzhm
          console.log("baseForm.zjhm:",this.queryForm.zjhm)
          this.queryOne()
        }
      }, 1000)
    }
  }

    //后端接口
    async queryOne(){
      this.$nextTick(() => {
        const params = { ...this.queryForm }
        console.log("params",params)
        informationApi.queryOne(params).then((res) => {
        console.log("获取后端数据", res.map.data)
        this.baseForm = res.map.data
        this.tableData = res.map.data.jlxx
        if(this.baseForm.zjhm != null){
          this.sfzhm = this.baseForm.zjhm
          this.files[0] = res.map.data.zzryzp
        }else{
          this.$message.error("您输入的信息不存在！")
        }
      })
    })
  }

参考链接：

https://blog.csdn.net/tangkthh/article/details/92679882?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-92679882-blog-120824691.pc_relevant_3mothn_strategy_and_data_recovery&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-2-92679882-blog-120824691.pc_relevant_3mothn_strategy_and_data_recovery&utm_relevant_index=3