Vue中-下拉框可以选择可以填写
<el-form-item label="方法名称">
<el-autocomplete popper-class="my-autocomplete"
v-model="customForm.MethodName"
:fetch-suggestions="querySearchMethod"
placeholder="请输入方法名称"
:disabled="IsDisabled"
@select="((item)=>selectMethodChange(item))">
<template slot-scope="{ item }">
<div class="name">{{ item.value }}</div>
</template>
</el-autocomplete>
</el-form-item> // 方法
querySearchMethod(queryString, cb) {
let that = this;
var solList = []
that.MethodOptionItems.forEach(item => {
solList.push({ 'label': item.value, 'value': item.label })
}) var results = queryString
? solList.filter(this.createFilterMethod(queryString))
: solList;
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilterMethod(queryString) {
let that = this;
var solList = that.MethodOptionItems;
return solList => {
return (
//solList.label.toLowerCase().indexOf(queryString.toLowerCase()) === 0
solList.label
);
};
},
handleSelectMethod(item) {
console.log(item);
},
Vue中-下拉框可以选择可以填写的更多相关文章
- VUE 单选下拉框Select中动态加载 默认选中第一个
<lable>分类情况</lable> <select v-model="content.tid"> <option v-for=&quo ...
- vue获取下拉框值
vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: < ...
- vue select下拉框绑定默认值
vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...
- vue实现下拉框全选和输入匹配
实际项目中的一个需求: 点击文本框,弹出带有复选框的选项,然后获取选中项的数据,传给后面的一个功能.在文本框输入内容,也会动态的匹配下拉列表,并且列表带有全选功能. 朴素的效果图: 我选择了用vue实 ...
- vue自定义下拉框组件
创建下拉框组件 Select.vue <template> <div class="selects"> <div :class="{sele ...
- vue+element下拉框样式的点击按钮
项目中点击按钮实在太多了,怎么办呢?我们就可以将它们制作成像下拉框那样的类似操作 1.HTML样式部分:关键点在于command 方法和属性 1 <el-dropdown 2 size=&quo ...
- vue 根据下拉框动态切换form的rule
taskCategorySelect (val) { // 任务类别下拉选择 if ( val == 5 ) { this.cameraORgateway = false; // true不可以使用 ...
- vue 树形下拉框 亲测 好用
https://vue-treeselect.js.org/ 顺带说一个开发中使用这个组件遇到的问题,关于回显之后无法修改的问题 找了很长时间 原因是数据类型导致的问题,数组里面应该是数字类型,直接 ...
- Vue 日期下拉框
<!-- html --> <template> <!-- 控件样式 --> <div class="select"> <di ...
随机推荐
- 2.10.1 article元素
嵌套 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <titl ...
- Web项目ConcurrentModificationException异常
后台SSH在做Session删除的时候,遇到了ConcurrentModificationException异常. 参考资料:http://blog.csdn.net/idesvo/article/d ...
- 【简●解】POJ 1845 【Sumdiv】
POJ 1845 [Sumdiv] [题目大意] 给定\(A\)和\(B\),求\(A^B\)的所有约数之和,对\(9901\)取模. (对于全部数据,\(0<= A <= B <= ...
- 1. 垃圾收集简介 - GC参考手册
说明: 在本文中, Garbage Collection 翻译为 “垃圾收集”, garbage collector 翻译为 “垃圾收集器”; 一般认为, 垃圾回收 和 垃圾收集 是同义词. Mino ...
- nodejs的express框架创建https服务器
一 openssl创建https私钥和证书 1.下载windows版openssl: http://slproweb.com/products/Win32OpenSSL.html Win64OpenS ...
- 远程调试nodejs
一 windows作为远程服务器 1.在远程服务器(192.168.1.1)上安装node-inspector:npm install -g node-inspector // -g 导入安装路径 ...
- i2c精简总结
基本的i2c的编程包括:读数据,写命令,写数据 有关i2c的时序需要的话查看这里http://blog.csdn.net/qqliyunpeng/article/details/41511347 1. ...
- 关于Filter中ServletRequest和ServletResponse强转HttpServletRequest和HttpServletResponse安全问题(向下转型一定不安全吗?)
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOE ...
- 《 阿Q正传》-鲁迅 词语解释 | 经典语录
词语解释 “太上有立德,其次是立功,其次是立言,虽久不废,此之谓不朽”.-出自<左传>-左丘明(春秋末期) 解释:(1)最上等的是树立德行,其次是建功立业,再其次是创立学说,即使过了很久也 ...
- 动态规划之最长递增子序列(LIS)
在一个已知的序列{ a1,a2,……am}中,取出若干数组成新的序列{ ai1, ai2,…… aim},其中下标 i1,i2, ……im保持递增,即新数列中的各个数之间依旧保持原数列中 ...