vue + element 第一個input模糊查詢 兩個input關聯

html部分   樣式自己寫 
       <el-autocomplete
                   multiple = 'false'
                  popper-class="my-autocomplete"
                  v-model="ruleForm.xyr_true_name"
                  :fetch-suggestions="querySearch"
                  placeholder="請輸入姓名"
                  @change='sel'
                  @select="handleSelect"

                >
                  <template slot-scope="{ item }">
                    <div class="name">{{ item.xyr_xm }}</div>
                  </template>
                </el-autocomplete>
              </div>
             <div class="items"><span class="sf">身份證：</span><el-input placeholder="請輸入身份證" v-model="ruleForm.xyr_card_id" ></el-input></div>
//上傳圖片部分 攜帶引數
   <el-upload
              class="upload-demo"
              ref="upload"
              action="上傳地址"
              :headers='請求頭'
              :data="https://bbs.csdn.net/topics/ruleForm"
              :on-success="success"
              :file-list="fileList"
              :auto-upload="false"
              list-type="picture">
              <el-button slot="trigger" size="small" type="primary">選取檔案</el-button>
              <div slot="tip" class="el-upload__tip">只能上傳jpg/png檔案，且不超過500kb</div>
            </el-upload>
              <div class="bot">
                 <el-button type="primary" round @click="submitUpload">確定</el-button>
                  <el-button type="primary" round @click="noup">取消</el-button>
              </div>

js部分
watch監聽data中    ruleForm: {
          xyr_true_name: '',
          xyr_card_id: '',
        },
我這樣寫因為還有個上傳圖片算了也加上吧
///////
    watch:{
      'ruleForm.xyr_true_name'(newVal,oldVal){
                console.log(newVal)
   
                this.sel()
                  console.log(this.ruleForm.xyr_card_id)
       }
    },
///
methods:
  querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 呼叫 callback 回傳建議串列的資料
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.xyr_xm.toLowerCase().indexOf(queryString.toLowerCase()) === 0);//字串頭查詢
         // return (restaurant.xyr_xm.indexOf(queryString) != -1);模糊查詢
        }
      },



    handleSelect(item) {
      this.ruleForm.xyr_true_name = item.xyr_xm
        console.log(item);
      },

        sel(){
            console.log('name值變化')
           let cz = this.restaurants.filter(item =>{
                 if(item.xyr_xm == this.ruleForm.xyr_true_name ){
                   return item
                 }
           });
            console.log(cz)  //回傳一個符合條件的陣列物件[{}]
           if(cz.length !=0){
              this.ruleForm.xyr_card_id = cz[0].xyr_sfzh
                      console.log('cz不為空')
           }else{
             this.ruleForm.xyr_card_id = ''
             console.log('cz為空')
           }
              
        },

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/30403.html

標籤：JavaScript

上一篇：請問這個是什么問題

下一篇：Js實作replaceAll