eui & search select
eui & search select
https://element.eleme.io/#/zh-CN/component/select
demo
<template>
<el-select
v-model="value"
multiple
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [],
value: [],
list: [],
loading: false,
states: ["Alabama", "Alaska", "Arizona",
"Arkansas", "California", "Colorado",
"Connecticut", "Delaware", "Florida",
"Georgia", "Hawaii", "Idaho", "Illinois",
"Indiana", "Iowa", "Kansas", "Kentucky",
"Louisiana", "Maine", "Maryland",
"Massachusetts", "Michigan", "Minnesota",
"Mississippi", "Missouri", "Montana",
"Nebraska", "Nevada", "New Hampshire",
"New Jersey", "New Mexico", "New York",
"North Carolina", "North Dakota", "Ohio",
"Oklahoma", "Oregon", "Pennsylvania",
"Rhode Island", "South Carolina",
"South Dakota", "Tennessee", "Texas",
"Utah", "Vermont", "Virginia",
"Washington", "West Virginia", "Wisconsin",
"Wyoming"]
}
},
mounted() {
this.list = this.states.map(item => {
return { value: `value:${item}`, label: `label:${item}` };
});
},
methods: {
remoteMethod(query) {
if (query !== '') {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.options = this.list.filter(item => {
return item.label.toLowerCase()
.indexOf(query.toLowerCase()) > -1;
});
}, 200);
} else {
this.options = [];
}
}
}
}
</script>
eui & search select的更多相关文章
- 条件查询,有input和select框,当查询条件获取焦点时支持摁下enter键查询
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- js+CSS实现模拟华丽的select控件下拉菜单效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Dynamics 365 Online-Relevance Search
区别于Quick Find,以及Full-Text Quick Find,Dynamics 365 Online有了一个特有的Search功能:Relevance Search.至于为什么是Onlin ...
- 模拟select控件,css模拟下拉
<!DOCTYPE html > <head> <meta http-equiv="Content-Type" content="t ...
- 模拟select控件&&显示单击的坐标&&用户按下键盘,显示keyCode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- MySQL中的全文索引
之前曾经发表了一篇关于SQL Server全文索引的文章.现在将MySQL全文索引的配置过程记录一下. Step1:创建Student表 CREATE TABLE `student` ( `id` I ...
- 各大主流.Net的IOC框架性能测试比较
Autofac下载地址:http://code.google.com/p/autofac/ Castle Windsor下载地址:http://sourceforge.net/projects/cas ...
- 高仿中国银行ATM系统
温馨提示由于代码太多只是上传了ATM客户端部分,管理员和超级管理员还有数据库部分上传了工程包,可以直接点击https://i.cnblogs.com/Files.aspx去里面找.package At ...
- 《精通C#》第十二章 Linq
Linq是在.Net3.5之后首次引入的,这种查询语言简单易学,可用范围非常广泛在学着之前,一直用在数据库操作之上,但是在学习这节课之后才发现,凡是实现泛型的接口类型都可以使用linq,简单来说就是实 ...
随机推荐
- 扩展欧几里得(exgcd)及其应用
定义 扩展欧几里得算法是用来在已知一组 \((a,b)\) 的时,求解一组 \((x,y)\) 使得 \[ax+by=gcd(a,b) \] 思想 and 板子 根据相关的知识可以得到 \[gcd(a ...
- LOJ10145郁闷的出纳员
传送门:https://loj.ac/problem/10145 简单的平衡树 ------------------------------------ 1 #include<bits/stdc ...
- Flutter环境搭建遇坑小结(二)
在上一节中,已经对Flutter运行中始终卡在Running Gradle task 'assembleDebug'...,做出了解决方案,继续往下运行,但是新的问题又出现了: Failed to i ...
- Java——break,continue,return语句
break语句: break:用于改变程序控制流 用于do-while.while.for中时,可跳出循环而执行循环后面的语句. break的作用:终止当前循环语句的执行. break还可以用来终止s ...
- 前台console调试技巧
前台console调试技巧 一.console.log() 二.console.warn() 三.console.dir() 四.console.table() 五.console.assert() ...
- chm打开看不到内容时好时坏
右击chm文件,属性====>解除锁定 再打开 ok
- 3.centos 7执行service iptables save报错问题
1.报错 [root@localhost ~]# service iptables save The service command supports only basic LSB actions ( ...
- TCP/IP__TCP协议IP协议&IP地址
IP协议(Internet Protocol) 1. 定位:计算机网络间相互连接进行通信而定义的协议.在因特网中,它是能使连接到网上的所有计算机网络实现相互通信的一套规则,规定了计算机在因特网上进 ...
- 嵌入式的我们为什么要学ROS
- ogn1.MethodFailedException:Method "xxx" failed for object xxx
问题描述:初学ssh写了个小项目,访问界面出现以下错误 java. lang. NoSuchllethodError: org. hi bernate. SessionF actory. openSe ...