element中el-autocomplete的常见用法示例

当使用 Vue.js 和 Element UI 搭建网站时,使用 el-autocomplete 组件可以实现一个自动完成的输入框。以下是 el-autocomplete 的常见用法示例:

基本用法

使用 v-model 在父组件中绑定输入框的值,使用 fetchSuggestions 方法获取自动完成的选项列表:

<template>
  <el-autocomplete
    v-model="inputValue"
    :fetch-suggestions="fetchSuggestions"
    placeholder="请输入内容">
  </el-autocomplete>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },

  methods: {
    fetchSuggestions(queryString, cb) {
      var options = [
        {value: '选项1', id: '1'},
        {value: '选项2', id: '2'},
        {value: '选项3', id: '3'}
      ];
      var results = queryString ? options.filter(this.createFilter(queryString)) : options;
      cb(results);
    },

    createFilter(queryString) {
      return option => {
        return option.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
      };
    }
  }
}
</script>

在上面示例代码中,定义了一个 fetchSuggestions 方法用来获取自动完成选项列表。这个方法接收两个参数:queryString 表示用户输入的值,cb 表示自动完成选项列表。

fetchSuggestions 方法中创建了一个选项数组 options,并通过 createFilter 方法过滤出符合用户输入的选项。最后将过滤出的选项作为 cb 的参数传递给 el-autocomplete 组件。

自定义输入提示

使用 slot 可以自定义输入提示:

<template>
  <el-autocomplete
    v-model="inputValue"
    :fetch-suggestions="fetchSuggestions"
    placeholder="请输入内容">
    <template slot="suggestion" slot-scope="{ item }">
      <div class="custom-item">
        {{ item.value }} (id: {{ item.id }})
      </div>
    </template>
  </el-autocomplete>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },

  methods: {
    fetchSuggestions(queryString, cb) {
      var options = [
        {value: '选项1', id: '1'},
        {value: '选项2', id: '2'},
        {value: '选项3', id: '3'}
      ];
      var results = queryString ? options.filter(this.createFilter(queryString)) : options;
      cb(results);
    },

    createFilter(queryString) {
      return option => {
        return option.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
      };
    }
  }
}
</script>

在上面示例代码中,使用 slot 自定义了 el-autocomplete 组件中选项的显示内容,显示了选项的 valueid 值。

以上就是 el-autocomplete 组件的常见用法示例。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:element中el-autocomplete的常见用法示例 - Python技术站

(1)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • 教你如何使用VUE组件创建SpreadJS自定义单元格

    教你如何使用VUE组件创建SpreadJS自定义单元格 前言 本篇文章将会详细讲解如何使用VUE组件创建SpreadJS自定义单元格。在讲解具体实现过程前,我们需要先明确两个概念: SpreadJS:一款可用于构建企业级Web应用程序的JavaScript电子表格控件。 自定义单元格:就是我们可以在电子表格中添加自己的HTML代码并且自由布局的单元格。 步骤…

    Vue 2023年5月27日
    00
  • 对vue生命周期的深入理解

    针对“对vue生命周期的深入理解”的完整攻略,我会进行以下方面的详细讲解: vue生命周期的概述 vue生命周期各个阶段的实现细节 vue生命周期使用的场景和注意点 示例一:使用beforeCreate钩子实现用户登录状态判断 示例二:使用组件销毁前的beforeDestroy钩子解除事件监听 1. vue生命周期的概述 Vue.js是一款轻量级MVVM框架…

    Vue 2023年5月28日
    00
  • Vue将页面导出为图片或者PDF

    如果想将 Vue 页面导出为图片或者 PDF,可以使用第三方库html2canvas和jspdf。下面是基本的步骤: 安装依赖库 npm install html2canvas jspdf –save 导入依赖库 import html2canvas from ‘html2canvas’; import jsPDF from ‘jspdf’; 编写导出函数…

    Vue 2023年5月27日
    00
  • Vue实现base64编码图片间的切换功能

    要实现Vue中base64编码图片间的切换功能,需要以下步骤: 1. 生成base64编码图片 使用FileReader对象和canvas元素可以将普通图片转化成base64编码图片,具体步骤如下: // 生成base64编码图片 const file = e.target.files[0] const reader = new FileReader() r…

    Vue 2023年5月29日
    00
  • uniapp小程序实现瀑布流布局的思路与代码

    接下来我将分享”uniapp小程序实现瀑布流布局的思路与代码”的完整攻略。 概述 瀑布流布局是一种经典的UI设计风格,它可以让页面更加美观且易于阅读。在uni-app小程序中实现瀑布流布局并不难,我们可以利用uni-app对flex布局的支持来完成。本文将介绍如何使用flex布局实现瀑布流布局。 实现方法 创建一个包含多个子元素的容器,每个子元素中包含一张图…

    Vue 2023年5月27日
    00
  • 详解vue高级特性

    详解Vue高级特性 简介 Vue.js 是一款流行的前端框架,它具有简单易学、高效、灵活等特点,被广泛应用于构建各种类型的 Web 应用。除了基本的数据绑定、组件化等特性外,Vue 还提供了许多高级特性,如动态组件、自定义指令、插件等,本文将对这些高级特性进行详细讲解。 动态组件 动态组件是指在 Vue 应用中根据需要在多个组件中动态切换的组件。Vue 提供…

    Vue 2023年5月27日
    00
  • Vue的MVVM实现方法

    Vue的MVVM实现方法可以分为以下几步: 1.定义数据模型 首先,需要定义一个数据模型,该模型是我们在Vue中操作的数据源。可以通过Vue的data选项来定义这个模型。 <script> const vueModel = new Vue({ el: ‘#app’, data: { message: ‘Hello World’, items: […

    Vue 2023年5月28日
    00
  • vue中遇到的坑之变化检测问题(数组相关)

    1. 问题背景 在Vue中,当数组相关数据更新时,会对应的更新DOM元素,但是在更新数组时,我们需要注意到一些坑点。 2. 变化检测方式 Vue采用的是基于 JavaScript 对象的变化检测机制,在更新一个对象时,Vue 会遍历它的每一个属性,并且使用 Object.defineProperty 把这个属性转为 getter 和 setter。 3. 数…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部