element-ui 远程搜索项目实战

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

在这里插入图片描述

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

html_7">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)
      })
    },