element-ui 远程搜索项目实战

功能描述：支持模糊搜索及分页展示数据

为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果el-option是通过v-for指令渲染出来的，此时需要为el-option添加key属性，且其值需具有唯一性，比如此例中的item.value。

html部分

  <el-row>
          <el-col :span="6"><i style="color:red">* </i>发放账户</el-col>
          <el-col :span="16">
            <el-select
              v-model="issueGift.company"
              filterable
              :remote-method="remoteMethod"
              remote
              placeholder="请选择"
              @change="companySelected"
              value-key="companyCode"
            >
              <el-option
                class="selectAll"
                v-for="item in companyList"
                :label="item.companyName"
                :key="item.companyCode"
                :value="{ companyCode: item.companyCode, companyShortname: item.companyShortname }"
              ></el-option>
              <div class="selectJob">
                <span class="text" @click.stop="prePage" v-show="sltPage != 1">上一页</span>
                <span class="text" style="padding-left:30px;" @click.stop="nextPage" v-show="sltPage !== pageCount">下一页</span>
              </div>
            </el-select>
          </el-col>
        </el-row>

主要属性 filterable remote :remote-method=“remoteMethod”（获取输入框数据发生变化事的事件 主要为了获取输入框的值以便调取搜索接口获取传参的值）

data部分

data() {
    return {
      companyName: '',
      companyCode: '',
      pageCount: 2, // 获取总页数
      sltPage: 1, // 当前页数
      }

Js部分

 // 下拉框远程搜索
    remoteMethod(query) {
      this.companyName = query   //获取输入框的值存进变量
      console.log('开始执行远程搜索', query)
      searchcompony({ dataState: '0', page: this.sltPage, rows: 10, companyName: this.companyName }).then(res => {
        this.companyList = res.list
        this.pageCount = Math.ceil(res.total / 10)
      })
    },
    // 下拉框分页
    nextPage() {
      console.log('执行下一页')
      if (this.sltPage < this.pageCount) {
        // 判断点击的页数是否小于总页数;
        ++this.sltPage
        searchcompony({ dataState: '0', page: this.sltPage, rows: 10, companyName: this.companyName }).then(res => {
          this.companyList = res.list
          this.pageCount = Math.ceil(res.total / 10)
        })
      }
    },
    prePage() {
      --this.sltPage
      if (this.sltPage < 1) {
        // 判断点击的页数是否小于1
        this.sltPage = 1
      }
      searchcompony({ dataState: '0', page: this.sltPage, rows: 10, companyName: this.companyName }).then(res => {
        this.companyList = res.list
        this.pageCount = Math.ceil(res.total / 10)
      })
    },