vue2中el-select模糊查询

 <div class="zhu_top_box">
         <div class="zhu_top_title">项目名称</div>
         <el-select
             clearable
             v-on:change="toProjectName()"
             class="zhu_top_input_2"
             v-model="project_name"
             filterable
             remote
             :remote-method="filterData"
             placeholder="请输入项目名称关键词"
             :loading="loading">
              <el-option
                v-for="item in Option"
                :key="item.project_number"
                :label="item.project_name"
                :value="item.project_name">
              </el-option>
         </el-select>
   </div>

 
    //下拉框查询请求
    toProjectName:function(){
      this.loadPage();
    },

    //模糊查询
    filterData(project_name){
      // console.log(project_name)
      axios({
        method: "POST",
        url: httpUrl.OA_personnel_maintenance_ledger_project_name_select,
        params: {
          project_name:project_name
        }
      }).then(res=>{
        let result = JSON.parse(res.data);
        // console.log(result)
        this.Option = result;

      }).catch(err=>{
      })
    },


    //查询遍历表
    loadPage(){
      axios({
        method: "POST",
        url: httpUrl.OA_personnel_maintenance_ledger_info_select,
        params: {
          project_name: this.project_name,
          open_date: this.open_date,
          risk_rank: this.risk_rank,
          letter_apply_condition: this.letter_apply_condition,
          letter_apply_state: this.letter_apply_state,
          page: page,
          pageSize: pageSize
        }
      }).then(res => {
        let result = JSON.parse(res.data);
        // console.log(result);
        this.list = result.list;
        this.count = result.count;
      }).catch(err=>{
      })
    },

  data() {
    return {
     
      Option: [],
      loading: false,
    

    }
  },