el-select远程搜索加分页组件

如果你想要在el-select中实现远程搜索加分页的功能，可以考虑使用element-ui中的el-pagination分页组件。

以下是实现步骤：

1. 在el-select组件中添加一个远程搜索的方法，该方法需要接收一个参数query，表示搜索关键字，同时需要返回一个Promise对象，该对象需要返回一个包含搜索结果的数组和总记录数的对象。

2. 在el-select组件中添加一个选项属性：remote。如果remote属性为true，则表示启用远程搜索和分页功能。

3. 在el-select组件中设置一个选项属性：remote-method。该属性需要绑定远程搜索方法。例如：

<el-select v-model="value" remote :remote-method="remoteMethod"></el-select>

4. 在el-select组件中添加一个el-pagination分页组件，并绑定一个分页方法。例如：

<el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination>

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    total: 0
  }
},
methods: {
  handleCurrentChange(page) {
    this.currentPage = page;
    this.remoteMethod(this.searchValue);
  },
  remoteMethod(query) {
    return new Promise((resolve, reject) => {
      // 发送远程搜索请求，返回符合条件的数据和总记录数
      const data = { list: [], total: 0 };
      resolve(data)
    }).then(res => {
      this.options = res.list;
      this.total = res.total;
    })
  }
}

在上面的代码中，el-pagination组件的current-page属性绑定到了currentPage变量，表示当前页码。page-size属性绑定到了pageSize变量，表示每页显示的条目数。total属性绑定到了total变量，表示总记录数。current-change事件绑定到了handleCurrentChange方法，表示用户切换页码时会调用该方法。

5. 在远程搜索方法中，根据传入的参数进行搜索，并返回符合条件的数据和总记录数。例如：

remoteMethod(query) {
  this.searchValue = query;
  return new Promise((resolve, reject) => {
    // 发送远程搜索请求，返回符合条件的数据和总记录数
    setTimeout(() => {
      const data = {
        list: Array.from({ length: this.pageSize }, (v, k) => k + (this.currentPage - 1) * this.pageSize + 1),
        total: 100
      };
      resolve(data)
    }, 1000);
  }).then(res => {
    this.options = res.list;
    this.total = res.total;
  })
}

在上面的代码中，我们使用setTimeout模拟了一个异步请求，返回符合条件的数据和总记录数。其中，list属性表示本页的数据，使用Array.from方法生成一个长度为pageSize的数组，每个元素的值等于当前页码和该元素在数组中的位置的乘积。total属性表示总记录数，假设总共有100条记录。

6. 在el-select组件中添加一个选项属性：loading。该属性需要绑定一个loading变量，表示正在加载数据。例如：

<el-select v-model="value" remote :remote-method="remoteMethod" :loading="loading"></el-select>

data() {
  return {
    loading: false
  }
},
methods: {
  remoteMethod(query) {
    this.loading = true;
    return new Promise((resolve, reject) => {
      // 发送远程搜索请求，返回符合条件的数据和总记录数
      setTimeout(() => {
        const data = {
          list: Array.from({ length: this.pageSize }, (v, k) => k + (this.currentPage - 1) * this.pageSize + 1),
          total: 100
        };
        resolve(data)
      }, 1000);
    }).then(res => {
      this.options = res.list;
      this.total = res.total;
      this.loading = false;
    })
  }
}

在上面的代码中，我们在远程搜索方法中设置了loading变量为true，表示正在加载数据。在异步请求完成后，我们将loading变量设置为false，表示加载数据完成。

这样，当用户输入关键字时，el-select组件会自动调用远程搜索方法进行搜索，并显示符合条件的数据。当用户切换页码时，el-pagination组件会自动调用分页方法加载更多数据。在加载数据时，el-select组件会显示一个loading动画，提示用户正在加载数据。