根据官网总结:

<el-select v-model="form.formVal" clearable filterable remote @change="changeVal($event)" :remote-method="getFormList" placeholder="请选择表单">
  <el-option
     v-for="item in formList"
     :key="item.id"
     :label="item.formName"
     :value="item.id">
  </el-option>
</el-select>            

@change="changeVal($event)" 事件:点击选择值变化时触发

:remote-method="getFormList" 绑定一个方法名,实时传递输入框内参数到方法内

方法代码如下:

    // 获取列表
    getFormList(query) {
      let _this = this;
      let params = {
          pageNum: 1,
          pageSize: 10,
          formName: query // 输入框内传递过来的参数
      }
      axios.post(this.url + '/form/list', params).then(function (res) {
        if(query === null || query === undefined ){ // 当输入框没值时默认显示前10条
          _this.formList = res.data.records;
        }else {
          _this.formList = res.data.records.filter(item => { // 输入框有值时搜索相应值
            return item.formName.indexOf(query) > -1;
          });
        }
      }).catch(function (error) {
        console.log(error);
      });
    },
changeVal(event){
   console.log(event,'参数')
},
Logo

前往低代码交流专区

更多推荐