element input框 值发生变化时搜索数据库相关信息

51 阅读1分钟
1. 
    首先导入lodash的debounce函数
    import { debounce } from 'ladash';
2. 
    <el-input v-model="form.assetCoding" placeholder="请选择资产" @input="aaa">
    @input当输入框中的数据发生改变时触发
3.
     data() {
        return {
             form: {
                assrtCoding: DF202302111112,
             }
         }
     },
     created() {
        this.debounced = debounce(this.search,500)
     },
     methods: {
         reset(assetCoding) {
           this.from = {
               ...
               assetCoding: assetCoding 
           }  
         },
         aaa() {
             this.debounced(this.form.assetCoding)
         },
         //查询数据库
         search(keyword) {
             //发送请求,搜索相关数据
             if(keyword.length == 14) {
                 //接口函数
                 list({assetCoding: keyword}).then((res)=> {
                     if(res.rows.length == 1) {
                         this.form = res.rows[0]
                     }else {
                         // 防止输入内容查询结果为0时 清空输入框中数据
                         this.reset(this.form.assetCoding)
                     }
                 })
             }
         }
     },
     beforeDestory() {
         //清除debounce函数的定时器
         this.debounced.cancel()
     }