element的input远程搜索怎么用，请求接口后i一次只显示30条结果

Element UI 的 `el-input` 组件本身并不支持远程搜索功能，但你可以结合其他组件来实现这个功能，比如 `el-autocomplete` 或 `el-select`。

以下是一个使用 `el-autocomplete` 组件实现远程搜索并一次只显示30条结果的示例代码：

<template>
  <el-autocomplete
    v-model="inputValue"
    placeholder="请输入关键词"
    :fetch-suggestions="fetchSuggestions"
    :popper-append-to-body="false"
    :popper-class="'remote-autocomplete'"
  >
    <template slot="default" slot-scope="{ item }">
      <span>{{ item }}</span>
    </template>
  </el-autocomplete>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      suggestions: []
    };
  },
  methods: {
    fetchSuggestions(queryString, callback) {
      // 发起远程请求获取数据
      // 你可以使用 axios 或其他 HTTP 库来发送请求
      // 假设请求的接口是 /api/search，返回的数据是一个包含结果的数组

      axios.get('/api/search', { params: { query: queryString } })
        .then(response => {
          this.suggestions = response.data.slice(0, 30); // 只显示前30条结果
          callback(this.suggestions);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

<style scoped>
.remote-autocomplete .el-autocomplete-suggestion__wrap {
  max-height: 200px;
  overflow-y: auto;
}
</style>

在上面的代码中，我们使用了 `el-autocomplete` 组件来实现远程搜索功能。在 `fetchSuggestions` 方法中，我们发送远程请求获取数据，然后将前30条结果保存在 `suggestions` 数组中。同时，我们通过 `popper-class` 属性和相关样式对下拉框的高度进行了限制，以确保最多只显示30条结果。

请注意，上述代码中的远程请求部分使用了伪代码，并没有包含实际的请求和数据处理逻辑。你需要根据你的实际情况进行相应的修改和调整。